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的动态响应后执行。
解决方法
给上传方法加个延时器
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下2023-07-07vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
这篇文章主要介绍了vue 动态设置img的src地址无效,npm run build 后找不到文件的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论