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项目路径不正确,自动跳转404的问题

    解决vue项目路径不正确,自动跳转404的问题

    这篇文章主要介绍了解决vue项目路径不正确,自动跳转404的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现扫码功能

    vue实现扫码功能

    这篇文章主要为大家详细介绍了vue实现扫码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Vue顶部tags浏览历史的实现

    Vue顶部tags浏览历史的实现

    在管理系统中,常常需要在顶部tags显示浏览历史。本文将教大家如何通过Vue实现这一功能,文中的示例代码讲解详细,需要的可以参考一下
    2021-12-12
  • vue项目debugger调试看不到源码的问题及解决

    vue项目debugger调试看不到源码的问题及解决

    这篇文章主要介绍了vue项目debugger调试看不到源码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue3中对数组去重的方法总结

    Vue3中对数组去重的方法总结

    随着开发语言及人工智能工具的普及,使得越来越多的人会主动学习使用一些开发工具,本文主要介绍了Vue数组去重的几种方法,结合 Vue 3 的响应式特性实现数据更新,需要的朋友可以参考下
    2025-09-09
  • Vue中使用Openlayer实现加载动画效果

    Vue中使用Openlayer实现加载动画效果

    这篇文章主要介绍了Vue+Openlayer加载动画效果的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • ElementUI 详细分析DatePicker 日期选择器实战

    ElementUI 详细分析DatePicker 日期选择器实战

    这篇文章主要介绍了ElementUI详细分析DatePicker 日期选择器实战教程,本文通过实例代码图文介绍给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 基于iview-admin实现动态路由的示例代码

    基于iview-admin实现动态路由的示例代码

    这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue3 封装回到顶部组件的实现示例

    Vue3 封装回到顶部组件的实现示例

    回到顶部在很多网页中都可以见到,本文主要介绍了Vue3 封装回到顶部组件的实现示例,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 关于vue-cli 3配置打包优化要点(推荐)

    关于vue-cli 3配置打包优化要点(推荐)

    这篇文章主要介绍了vue-cli 3配置打包优化要点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论