关于el-upload文件上传的问题

思路：

1、给组件添加事件

 :before-upload="beforeUploadFn"

 文件上传之前的校验，例如上传格式、上传大小等

2、添加事件

:http-request="handleUpload"

把自动上传改为手动上传，此处还要加一个属性

:auto-upload="false" 

3、添加事件

 :on-change="handleChange" 

关于点击上传文件的change事件，这里可以用来获取文件的一些信息 ，可以实现图片上传前的预览操作

          <el-upload
            list-type="picture"
            class="upload-demo"
            drag
            ref="upload"
            action
            multiple
            :auto-upload="false"
            :show-file-list="true"
            :http-request="handleUpload"
            :on-change="handleChange"
            :limit="1"
            :before-upload="beforeUploadFn"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadRemove"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>

 

主要js代码

1、对上传文件大小的限制

 // 文件上传之前的限制
    beforeUploadFn(file) {
      console.log(90, file);
      const isSize = file.size / 1024 / 1024 < 1;
      console.log(92, isSize);
      if (!isSize) {
        this.$message.error("文件大小不能超过20M！");
        return false;
      }
    },

2、关于手动上传文件的

    // 手动上传
    handleUpload(file) {
      console.log(177, file);
      let formData = new FormData(); // 新建一个FormData()对象，这就相当于你新建了一个表单
      console.log(187, formData);
      formData.append("file", file.file); // 将文件保存到formData对象中
      console.log(111, this.selectValue);

      if (this.selectValue) {
        formData.append("id", this.selectValue);
        console.log(111, this.selectValue);
      }
      console.log(188, formData.get("file"), formData.get("id"));
      // 调用上传接口
      // uniReq({
      //   path:'/doc/upload',
      //   method:'post',
      //   data:formData
      // }).then(res=>{
      //   console.log(109,res);
      // })
    },

3、触发上传文件事件（给自己想触发上传文件上传的按钮添加该事件即可）

   // 上传图片确认框
    confirmFn() {
      // 按钮触发调用手动上传的方法
      this.$refs.upload.submit();
    },

单纯记录！！个人理解！不对之处望指正