element-ui Upload上传组件动态配置action方式
更新时间:2023年07月18日 14:29:16 作者:猴子请来的水军。
这篇文章主要介绍了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的动态响应后执行。
解决方法
给上传方法加个延时器
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3中unplugin-auto-import自动引入示例代码
unplugin-auto-import 这个插件是为了解决在开发中的导入问题,下面这篇文章主要给大家介绍了关于vue3中unplugin-auto-import自动引入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
这篇文章主要介绍了在vue+webpack实际开发中出现两个或多个菜单公用一个组件的解决方案,需要的朋友可以参考下2017-11-11详解vue-cli + webpack 多页面实例配置优化方法
本篇文章主要介绍了详解vue-cli + webpack 多页面实例配置优化方法,具有一定的参考价值,有兴趣的可以了解一下2017-07-07
最新评论