vue3<el-upload action
时间: 2023-11-06 09:03:16 浏览: 118
vue+axios+el-upload实现文件上传(带参数):
3星 · 编辑精心推荐
引用提供了关于Vue3中使用el-upload组件的一些代码示例,包括获取七牛token、上传图片到七牛、获取返回图片路径以及设置el-upload的属性等。根据引用中的代码示例,你可以按照这个思路进行操作。
首先,从后台获取七牛的token,可以使用相关的接口或方法。然后,设置el-upload组件的属性,包括file-list、action、before-upload和data等。其中,file-list用于设置上传文件列表,action是上传文件的地址,before-upload用于上传之前的校验,data是上传文件时附加的数据。
在Vue3中,你可以使用如下代码实现el-upload组件的相关功能:
```
<template>
<el-row>
<el-col :span="12">
<el-form-item label="图片:">
<el-upload class="avatar-uploader" :on-change="getFile" :show-file-list="false" :action="domain" :auto-upload="false" :data="form">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
fileList2: [], // 上传文件列表
domain: '', // 上传文件的地址
form: {} // 上传文件时附加的数据
};
},
methods: {
getFile(file) {
// 上传文件的方法
// 处理上传成功后的回显路径
},
beforeAvatarUpload(file) {
// 上传文件之前的校验
}
},
mounted() {
// 获取七牛token的方法
// 设置this.domain为上传文件的地址
}
};
</script>
```
以上代码是一个基本的el-upload组件的使用示例,你可以根据自己的需求进行修改和拓展。
阅读全文