vue2+element实现自定义上传

vue2+element实现自定义上传

upload上传样式

 <el-form-item class="selectFile" label="导入模板:">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="customize"
            :file-list="fileList"
            :auto-upload="false"
            :http-request="uploadFile"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="success" icon="el-icon-upload"
              >将填好的Excel文件上传</el-button
            >
          </el-upload>
        </el-form-item>
 <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitUpload"
          >确认上传
        </el-button>
      </div>

自定义上传方法

    uploadFile(params) {
      let file = new FormData();
      file.append("file", params.file);
      importRecord(file).then((res) => {
        if (res.status == 200) {
          this.$message.success(res.message);
          this.importFormVisible = false;
        }
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },

注意

1、http-request：覆盖默认的上传行为，可以自定义上传的实现—前面要写冒号
2、同时要写:auto-upload=“false”–选取文件后不立即进行上传
3、一定别忘了写 ref=“upload”，不然submitUpload（）方法会报错submit未定义