el-upload上传多张图片上传成功后如何处理
时间: 2023-07-18 13:33:22 浏览: 57
当多张图片上传成功后,`on-success` 回调函数会被触发。你可以在这个函数中对上传成功的图片进行处理,例如展示上传成功的图片、发送请求保存图片等。
以下是一个示例代码,演示了如何在上传成功后展示上传成功的图片和向服务器发送请求保存图片:
```html
<template>
<el-upload
class="upload-demo"
action="/your-upload-api"
:multiple="true"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:limit="3"
:file-list="fileList"
:auto-upload="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
最多上传 3 张图片,支持 jpg/png 格式
</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [],
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response); // 服务器返回的数据
console.log(file); // 当前上传的文件对象
console.log(fileList); // 已上传的文件列表
// 将上传成功的图片展示在页面上
this.fileList = fileList.map((file) => {
file.url = URL.createObjectURL(file.raw);
return file;
});
// 向服务器发送请求保存图片
fileList.forEach((file) => {
const formData = new FormData();
formData.append('file', file.raw);
// 发送请求代码
// axios.post('/your-save-api', formData);
});
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
return true;
},
handleExceed(files, fileList) {
this.$message.warning(`只能上传 3 张图片`);
},
},
};
</script>
```
上面的示例代码中,我们在 `handleSuccess` 回调函数中将上传成功的图片展示在页面上,并向服务器发送请求保存图片,你可以根据自己的需求来进行调整。