Web wiki

作者: GaoXiaoGao | 来源:发表于2021-02-25 10:55 被阅读0次

    1.下载项目中的文件到电脑本地

    将文件放在项目public文件夹file中,下载方法如下

          window.open('/file/表格字段模板.xlsx');
    

    2.使用element upload控件如何限制上传文件的大小

    <el-upload
                        style="margin-left: 35px"
                        drag
                        action="#"
                        :file-list="fileList"
                        :auto-upload="false"
                        :on-exceed="handleExceed"
                        :limit="1"
                        :on-remove="removeFile"
                        :on-error="uploadError"
                        :on-change="uploadChange"
                        :before-remove="beforeRemove"
                        accept=".xls, .xlsx"
                      >
                        <img width="66px" height="53px" src="@/assets/img/mark/upload.png" />
                        <div style="margin-top:20px;margin-bottom: 20px"><span style="color: #999999;font-size: 14px;">点击或将文件(xsl、xslx),拖拽到这里上传</span></div>
                        <div><el-button size="small" type="primary">点击上传</el-button></div>
    
                      </el-upload>
    

    在uploadChange方法中进行判断

     //文件上传
          uploadChange(file, fileList) {
            const isLt2M = file.size <  1024 * 1024 *2;
            if (!isLt2M) {
              this.$message({
                showClose: true, // 是否显示关闭按钮
                duration: 2000, // 弹框显示时间,毫秒
                message: '上传文件大小不能超过 2MB!',
                type: 'error',
              });
            }
    
            if(isLt2M){
              this.uploadFile = file.raw || null;
            }else{
              //大小2M的文件从上传文件列表中删除
              fileList.splice(-1,1);
            }
          },
    

    2.两张图片叠放在一起的方法

    <div class="left-top" style="position:relative;background:#FFFFFF">
                <div style="position: absolute;">
                  <img style="margin: 20px" height="17px" src="@/assets/img/mark/batch_text_two.png" />
                </div>
                <img width="100%" height="60px" src="@/assets/img/mark/top_bar_two.png" />
              </div>
    

    这样前面的图片在后面图片的上面

    3.Form形式上传文件

        upload(){
            this.loading = true;
            let formData = new FormData();
            formData.append('file', this.uploadFile);
    
            this.$http({
              method: 'post',
              url: '/xxx/xxx',
              data: formData,
              headers: {
                'Content-Type': 'multipart/form-data',
                'X-Requested-With': 'XMLHttpRequest',
              },
            }).then(res=>{
                this.loading = false;
           }) .catch((res)=>{
                this.loading = false;
              });
      }
    

    相关文章

      网友评论

          本文标题:Web wiki

          本文链接:https://www.haomeiwen.com/subject/xlvyfltx.html