【Vue】element 组件 el-upload 动态绑定上传地址 action

_修铁路的

于 2023-02-24 15:44:05 发布

阅读量3.2k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 el-upload

本文链接：https://blog.csdn.net/sinat_35626559/article/details/129202403

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中使用el-upload组件，在上传文件前根据业务逻辑动态设定上传接口路径。通过before-upload事件，可以修改action属性以适应不同的上传需求，如添加水印或编辑文件。

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

<template>
        <el-upload
            ref="uploadDemo" 
            :action="uploadAction"
            :before-upload="beforeUpload">
            <el-button
                size="mini"
                type="primary"
                class="upload-btn" >
                上传
            </el-button>
        </el-upload>
</template>
<script>
	export default {
		name: 'upload',
		data () {
			return {
				uploadAction: this.$api.common.uploadFileUrl
			}
		},
		methods: {
			// 上传之前，根据页面逻辑动态设置上传的接口路径
			beforeUpload () {
				return new Promise((resolve, reject) => {
				    //根据页面逻辑动态设置上传路径
                    _self.actionUrl = _self.apiPath + _self.$api.common.uploadFileUrl;
                if (_self.isNeedWater) {
                    _self.actionUrl = _self.apiPath + _self.$api.common.uploadFileHasWaterUrl;
                }
                if (_self.$utils.isNotEmpty(_self.relationId) && _self.asyncUpdate) {
                    _self.actionUrl = _self.apiPath + _self.$api.common.uploadEditFileUrl
                }

				});
			}
		}
	}
</script>

根据相同的原理，可以在上传前，根据当前业务逻辑，对上传路径、参数等进行处理，增加或修改值上传。