element-ui Upload上传组件动态配置action方式
作者：猴子请来的水军。
这篇文章主要介绍了element-ui Upload上传组件动态配置action方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element-ui Upload上传组件动态配置action
<el-upload class="upload-file" ref="upload" :limit="currentTableData.length" :headers="upload.headers" :action="upload.newurl" :on-exceed="handleExceed" :before-remove="beforeRemove" :before-upload="handleFileBefore" :auto-upload="false" multiple >
export default {
data() {
return {
// 上传参数
upload: {
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
newurl:'',
url: process.env.VUE_APP_BASE_API + "/nfm/nfmfile/upload/",
relationid:null,
},
}
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 ${this.currentTableData.length} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleFileBefore(file){
return new Promise((resolve, reject) => {
// 拼接上传url
// 此处动态配置action URL
this.upload.newurl = this.upload.url + this.upload.relationid;
// dom上传地址更新完成后，触发上传
this.$nextTick(() => resolve());
});
},
}element-ui upload上传组件动态配置action遇到的的坑
element-ui中，使用upload上传组件时，很多时候需要带上文件的信息，这就需要动态配置action。
我遇到的情况是
配置action后上传时会报错，或者所带的信息是上一次上传的信息。
这是因为element的上传方法先执行，action的动态响应后执行。
解决方法
给上传方法加个延时器
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。