el-upload上传附件并携带其他参数
<el-dialog title="导入"
:visible.sync="showExportDialog"
>
<el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px">
<el-form-item label="excel文件" prop="file">
<el-upload style="display: inline-block;margin-left: 10px"
class="upload-demo"
ref="upload"
accept=".xls,.xlsx"
:data="addForm" // 发送请求的参数对象
:auto-upload="false" // 取消自动上传,获取file对象后先等一下
:action="uploadFileUrl" // 提交表单的url
:headers="headers" //请求头
:show-file-list="false"
:on-success="handleUploadSuccess"
:on-change="changeFile"
>
<span v-if="curName">{{curName}}</span>
<el-button type="primary" icon="" v-else>选文件</el-button>
</el-upload>
</el-form-item>
<el-form-item label="纸质扫描附件" prop="annexUrl">
<fileUpload :isShowTip="false" :value="addForm.annexUrl" :limit="1" @input="getFileList"
:fileType="['png','jpg','jpeg']">
</fileUpload>
</el-form-item>
<el-form-item label="培训现场其它说明" prop="notes" v-if="data_type==='train'">
<el-input type="textarea" v-model="addForm.notes"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submitComplete">确 定</el-button>
</span>
</el-dialog>
script部分
changeFile(file){
this.curName = file.name; // 必须,选择文件后可把文件名展示出来,否则感觉没有选中文件一样。
},
// 导入成功
handleUploadSuccess(res, file) {
console.log('res',res);
if (res.code !== 200) {
return this.$alert(res.message, {
dangerouslyUseHTMLString: true
});
} else {
this.closeDialog();
this.pageList();
}
},
getFileList(filesList) {//纸质扫描附件,这里给参数对象的annexUrl赋值
this.addForm.annexUrl= '';
filesList?.forEach(el=>{
this.addForm.annexUrl = el.url;
})
},
// 导入:提交表单
submitComplete() {
console.log(this.addForm)
this.$refs.addForm.validate(async (valid) => {
if (valid) {
this.$refs.upload.submit(); // 表单验证后这里直接调用el-upload组件自带的click方法。
}
});
},
遇到的问题:
1、必须在上传组件el-upload组件上传,传递file(formData)类型的文件对象,表单验证后再传递(即使封装成formData)永远无法触发后台接口。
2、此时当选择的excel文件为必选项,则表单验证无法进行,因为file是el-upload自带的参数key,此时若再在addForm内部加一个file验证,则请求时会有两个file值,且是不对的。(待解决这个问题再来更新。)
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/17797248.html