<el-upload
action="http://127.0.0.1:8888/api/private/v1/upload"
// action 表示图片要上传到的后台API地址(要写完整路径)
:on-preview="handlePreview"
// on-preview 处理图片预览的事件
:on-remove="handleRemove"
// on-remove 处理图片删除的事件
list-type="picture"
// list-type 图片呈现的方式
:headers="headerObj"
// 图片上传组件的headers请求头对象
:on-success="handleSuccess"
// 监听图片上传成功的事件
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
一.upload组件上传时需要配置对应的请求头配置,否则会导致上传失败
二.上传图片的业务逻辑
1.拼接得到一个图片信息对象
2.将图片信息对象,push到pics数组中
// 监听图片上传成功的事件
handleSuccess(response) {
console.log(response);
// 1.拼接得到一个图片信息对象
const picInfo = { pic: response.data.tmp_path };
// 2.将图片信息对象,push到pics数组中
this.addForm.pics.push(picInfo);
console.log(this.addForm);
},
三.删除图片的业务逻辑
1.获取将要删除的图片的临时路径
2.从pics数组中,找到这个图片对应的索引值
3.调用数组的splice方法 把图片信息从pics数组中移除
// 处理删除图片的操作
handleRemove(file) {
console.log(file);
// 1.获取将要删除的图片的临时路径
const filePath = file.response.data.tmp_path;
// 2.从pics数组中,找到这个图片对应的索引值
const index = this.addForm.pics.findIndex((x) => {
x.pic === filePath;
});
// 3.调用数组的splice方法 把图片信息从pics数组中移除
this.addForm.pics.splice(index, 1);
console.log(this.addForm);
},