elementUI 上传组件 http-request （覆盖默认的上传行为，可以自定义上传的实现）使用

elementUI 上传组件很方便我们上传个种类型的文件，但是一般我们的请求都是自己配置的，通过 action="url"传入上传地址就感觉不太喜欢

这时候我们就可以使用 http-request 属性来覆盖默认的上传行为（即action="url"），自定义上传的实现

html代码

    <el-dialog title="批量导入" :visible.sync="importDialog" width="30%">       <div class="importDialog-content">         <el-upload ref="upload"                     :limit="1"  <!-- 最大允许上传个数 -->                    :auto-upload="false"  <!-- 是否在选取文件后立即进行上传 -->                    drag                     :http-request="uploadFile"  <!-- 覆盖默认的上传行为，可以自定义上传的实现 -->                    accept='.xls,.xlsx' <!-- 接受上传的文件类型 -->                    action="customize">           <i class="el-icon-upload"></i>           <div class="el-upload__text">将文件拖到此处，或             <em>点击上传</em>           </div>           <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->         </el-upload>       </div>       <span slot="footer" class="dialog-footer">         <span class="template-download">           <i class="el-icon-download"></i>格式模板下载：data.xlsx         </span>         <el-button @click="importDialog = false">取 消</el-button>         <el-button type="primary" @click="submitUpload">确定上传</el-button>       </span>     </el-dialog> js部分

     // 确认上传     submitUpload() {       this.$refs.upload.submit();     },     // 文件上传     uploadFile(params) {       console.log("uploadFile", params);

      const _file = params.file;       const isLt2M = _file.size / 1024 / 1024 < 2;

      // 通过 FormData 对象上传文件       var formData = new FormData();       formData.append("file", _file);

      if (!isLt2M) {         this.$message.error("请上传2M以下的.xlsx文件");         return false;       }

      // 发起请求       RequestUploads(formData).then(res => {         console.log("_RequestUploads_", res);         if (code === 2000) {           this.$message({             type: "success",             message: res.msg           });

          // 隐藏弹出框           this.importDialog = false;         } else {           this.$message({             type: "warning",             message: res.msg           });         }     }