element ui通过formdata上传文件

ElementUI的upload组件手动上传，formdata表单数据

Excerpt

使用场景：选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。???直接上代码：index.vue<el-form ref=“importList” :rules=“ImportRules” :model=“importList” label-positio…

🐵使用场景：

选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。

直接上代码：

index.vue

<el-formref="importList":rules="ImportRules":model="importList"label-position="left"label-width="100px"style="width:70%;margin-left:50px;"><el-form-itemlabel="平台号："prop="platNum"><el-inputv-model="importList.platNum"clearablemaxlength="50"placeholder="请输入平台号"size="mini"style="width: 90%"/></el-form-item><el-form-itemlabel="任务名称："prop="taskName"><el-inputv-model="importList.taskName"clearablemaxlength="50"placeholder="请输入任务名称"size="mini"style="width: 90%"/></el-form-item><el-form-itemlabel="Excel文件："prop="file"><el-uploadclass="upload-demo"ref="upload"multipleaccept=".xls"action="":with-credentials="true":http-request="httpRequest":on-preview="handlePreview":on-remove="handleRemove":on-change="fileChange":on-success="upFile":file-list="fileList":data="getUploadList":auto-upload="false"><el-buttonslot="trigger"size="small"type="primary">选取文件</el-button><divslot="tip"class="el-upload__tip"style="display: inline-block;margin-left: 20px">只能上传xls格式的 excel文件</div></el-upload></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="cancelFinishPlatform">取消</el-button><el-buttonstyle="margin-left: 10px;"type="success"@click="submitUploadList">上传到服务器</el-button></div>

httpRequest(param){console.log(param)let fileObj = param.file let fd =newFormData()  fd.append('file', fileObj)  fd.append('platNum',this.importList.platNum)  fd.append('taskName',this.importList.taskName)let url = process.env.CMS1_BASE_API+'cdnDel/uploadExcel'let config ={headers:{'Content-Type':'multipart/form-data'}}  axios.post(url, fd, config).then(res=>{if(res.code===0){this.submitForm();}})}

手动上传的话，action 可以不用关注咯。

:auto-upload=“false” 设置为flase ,为手动上传。

🐝upload组件注意点：

1. 选取好文件后，如何触发上传到服务器的操作呢？

我们可以使用官网提供的 submit() 方法

this.$refs.upload.submit();

但是要注意执行submit方法后，他会触发upload组件中的 http-request ，而 httpRequest 这个方法是需要你自己去定义的,实例请见上面👆的代码，亲测可用。

:http-request="httpRequest"

官网定义如下：

2. 注意在增加文件和删除文件时，对 :file-list 上传的文件列表进行相应的增减

<el-upload:on-remove="handleRemove":on-change="fileChange":file-list="dataList":auto-upload="false"><el-buttonslot="trigger"size="small"type="primary">选取文件</el-button><divslot="tip"class="el-upload__tip"style="display: inline-block;margin-left: 20px">只能上传xls格式的 excel文件</div></el-upload>

fileChange(file, fileList){this.dataList = fileList},

on-change 是文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

3. 注意上传时，请求头要修改为 ‘multipart/form-data’

我们需要创建一个 FormData 对象，以表单的形式上传参数和excel文件

httpRequest(param){console.log(param)let fileObj = param.file let fd =newFormData()  fd.append('file', fileObj)  fd.append('platNum',this.importList.platNum)  fd.append('taskName',this.importList.taskName)}

4. 如果把提交函数用在http-request钩子中，fileList多长就执行请求多少次接口，依旧是无法做到只请求一次上传多文件