elementui upload上传图片给同一数组的不同的对象里的数据赋值
时间: 2023-09-30 18:07:36 浏览: 118
用WebClient.UploadData方法上载文件数据的方法
您可以在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', // 上传图片的接口地址
data: [
{ id: 1, name: '张三', imgUrl: '' },
{ id: 2, name: '李四', imgUrl: '' },
], // 存放需要赋值的数据
};
},
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.data[0].imgUrl = imgUrl;
this.data[1].imgUrl = imgUrl;
} else {
this.$message.error('上传失败');
}
},
},
};
</script>
```
在这个例子中,我们使用了一个data数组来存放需要赋值的数据。在上传成功后的回调函数中,我们将返回的图片地址分别赋值给了data数组中不同对象的不同属性,从而实现了将同一数组中的数据赋值给不同的对象的不同属性。
阅读全文