欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-02 21:17:28
...
<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>

上一篇:

下一篇: