Vue + Element el-upload 动态绑定 action 上传地址，上传地址更新不及时

最新推荐文章于 2024-09-04 17:21:53 发布

Plumccc

最新推荐文章于 2024-09-04 17:21:53 发布

阅读量6.9k

点赞数 3

分类专栏： Vue + Element ui Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38886539/article/details/110180400

版权

Vue + Element ui 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

本文介绍了一个基于Vue的文件上传组件实现。该组件使用Element UI库，并通过调用后端接口获取上传所需的token来动态设置上传地址。具体实现中，利用before-upload钩子处理上传前逻辑。

摘要由CSDN通过智能技术生成

<template>
        <el-upload
            :action="uploadAction"
            :before-upload="beforeUpload"
            ref="upload" >
            <el-button
                size="mini"
                type="primary"
                class="upload-btn" >
                上传
            </el-button>
        </el-upload>
</template>
<script>
	export default {
		name: 'upload',
		data () {
			return {
				uploadAction: ''
			}
		},
		methods: {
			// 上传之前，调接口获取 token 后拼接到上传地址
			beforeUpload () {
				return new Promise((resolve, reject) => {
				       this.portService.getFileToken(res => {
				       			// 拼接上传url
				       			this.uploadAction = `/api/upload?token=${res.token}`;
				       			// dom上传地址更新完成后，触发上传
				       			this.$nextTick(() => resolve());
				       });
				});
			}
		}
	}
</script>