选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。😏
index.vue
<el-form ref="importList" :rules="ImportRules" :model="importList" label-position="left" label-width="100px" style="width:70%;margin-left:50px;"> <el-form-item label="平台号：" prop="platNum"> <el-input v-model="importList.platNum" clearable maxlength="50" placeholder="请输入平台号" size="mini" style="width: 90%"/> </el-form-item> <el-form-item label="任务名称：" prop="taskName"> <el-input v-model="importList.taskName" clearable maxlength="50" placeholder="请输入任务名称" size="mini" style="width: 90%"/> </el-form-item> <el-form-item label="Excel文件：" prop="file"> <el-upload class="upload-demo" ref="upload" multiple accept=".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-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 20px">只能上传xls格式的 excel文件</div> </el-upload> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancelFinishPlatform">取消</el-button> <el-button style="margin-left: 10px;" type="success" @click="submitUploadList">上传到服务器</el-button> </div>
// param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file httpRequest(param) { console.log(param) let fileObj = param.file // 相当于input里取得的files let fd = new FormData()// FormData 对象 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 ,为手动上传。
我们可以使用官网提供的 submit() 方法
this.$refs.upload.submit();但是要注意执行submit方法后，他会触发upload组件中的 http-request ，而 httpRequest 这个方法是需要你自己去定义的,实例请见上面👆的代码，亲测可用。
:http-request="httpRequest"官网定义如下：
// fileList 是文件列表发生变化后，返回的修改后的列表对象，这里直接赋值就好啦！ fileChange(file, fileList) { // console.log(file.raw) this.dataList = fileList },
on-change 是文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
我们需要创建一个 FormData 对象，以表单的形式上传参数和excel文件
// param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file httpRequest(param) { console.log(param) let fileObj = param.file // 相当于input里取得的files let fd = new FormData()// FormData 对象 fd.append('file', fileObj)// 文件对象 fd.append('platNum', this.importList.platNum) fd.append('taskName', this.importList.taskName) }