elementui upload上传图片同一数组给指定的不同的对象里的数据赋值
时间: 2024-04-04 21:35:24 浏览: 64
您可以在element-ui的upload组件中,使用自定义的action属性,将上传的图片发送到后端服务,然后在服务端将图片保存并返回保存后的图片地址。然后您可以在上传成功的回调函数中,将返回的图片地址赋值给每个指定的对象中的对应属性。
例如,假设您要上传一张图片,并将其赋值给两个对象中的不同属性,可以像下面这样实现:
```html
<template>
<div>
<el-upload
:action="uploadUrl"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/api/upload', // 上传图片的接口地址
imgUrl1: '', // 第一个对象中的图片地址
imgUrl2: '', // 第二个对象中的图片地址
};
},
methods: {
beforeUpload(file) {
// 在上传之前可以对上传的文件进行校验,例如判断文件类型和大小等
// 返回false可以取消上传
return true;
},
handleSuccess(response, file, fileList) {
// 上传成功的回调函数
// response为上传接口返回的数据
// file为上传的文件对象
// fileList为当前已上传的文件列表
// 假设上传成功后,返回的数据格式如下:
// { status: 'success', data: { imgUrl: 'http://example.com/image.jpg' } }
if (response.status === 'success') {
const imgUrl = response.data.imgUrl;
// 将图片地址分别赋值给两个对象的不同属性
this.imgUrl1 = imgUrl;
this.imgUrl2 = imgUrl;
} else {
this.$message.error('上传失败');
}
},
},
};
</script>
```
在这个例子中,我们使用了一个uploadUrl属性来指定上传图片的接口地址。在上传成功后的回调函数中,我们将返回的图片地址分别赋值给了imgUrl1和imgUrl2属性,从而实现了将同一数组中的数据赋值给不同的对象的不同属性。
阅读全文