近期使用Avue开发上传图片碰到了一个问题，官方也有这个问题，在此记录一下这个问题。
Avue官网的avue-crud的type=upload有一个array类型的，出现是下面图的样子
注意坑：按理说我们点击删除一个图片就剩下一个，然后上传一个又变成两个了，结果不是你们想的那样，删除一个，上传一个，结果是三个，删除的没有真正的删除，你们可以去Avue官网去看看这个坑
看坑链接
1.删除
2.上传
是不是很神奇，那该怎么去解决呢？那我们继续往下面看
注意看注释！！！
注意看注释！！！
注意看注释！！！
我们公司是这样的，一个单图，一个数组图
下面我来说我的逻辑吧
- 首先avue-crud自定义一个编辑按钮，点击后把当前一行的数据传到函数里
- 数据到函数里，把值赋值到自定义的弹出框里面的avue-form里面v-mode里面，然后打开弹出框
- 给表格一个删除事件:upload-delete=“uploadDelete”，file.uid是你点击的下标，记住里面写一个Promise，这样单个图删除不会报错，里面可以写自己的删除逻辑（删除是最重要的，就因为删除不成功才会这样的）
- 之后提交就ok了
下面放代码
-----------------------html，自定义编辑按钮
<avue-crud
:data="data"
:option="option"
:page.sync="page"
:table-loading="loading"
@on-load="queryList"
@search-change="searchChange"
@search-reset="refresh"
@refresh-change="refresh"
>
<template slot-scope="{ row }" slot="menu">
<el-button
style="color: #409EFF;"
size="small"
type="text"
@click="editBox(row)" //点击打开自定义弹出框，顺便把这行数组传过去
icon="el-icon-edit"
>编辑</el-button
>
</template>
</avue-crud>
-------------------------html，自定义的弹出框
<!-- 站点信息编辑 -->
<el-dialog
title="站点信息编辑"
:visible.sync="box" //控制弹出框打开和关闭
v-dialogdrag
class="avue-dialog"
width="60%"
:append-to-body="true"
>
<avue-form //avue的表格
:option="optionDit"
v-model="formDit"
:upload-delete="uploadDelete" //删除前的回调
@submit="handleSubmit" //表格提交
>
</avue-form>
</el-dialog>
--------------------------------------js
optionDit: {
column: [
{
label: "站点名称",
prop: "shopName",
rules: [
{ required: true, message: "请填写站点名称", trigger: "change" },
],
},
{
label: "详细地址",
prop: "address",
rules: [
{ required: true, message: "请填写详细地址", trigger: "change" },
],
},
{
label: "营业执照",
prop: "businessLicense",
type: "upload",
listType: "picture-img", //这是单图
span: 24,
props: {
value: "url", //看文档有解释
label: "url", //看文档有解释
},
propsHttp: {
url: "url", //看文档有解释
home: this.$api.imgUrl, //看文档有解释
},
tip: "只能上传jpg/png,大小700*400,且不超过500kb",
data: { imgType: "---------" }, //看文档有解释
dataType: "json",
action: "----------------",
viewDisplay: false,
},
{
hide: true,
showColumn: false,
label: "站点照片",
prop: "shopPhotos",
type: "upload",
dataType: "array", //数组图
limit: 5,
props: {
value: "url", //看文档有解释
label: "url", //看文档有解释
},
propsHttp: {
url: "url", //看文档有解释
home: this.$api.imgUrl, //看文档有解释
},
data: { imgType: "---------" },
span: 24,
listType: "picture-card", //数组图
tip: "只能上传jpg/png文件，且不超过500kb",
action: "-------------------",
rules: [
{ required: true, message: "请上传站点照片", trigger: "change" },
],
},
],
},
formDit: {
id: "", //映射props的数据，也是填写和选择存放的地方
shopName: "", //映射props的数据，也是填写和选择存放的地方
address: "", //映射props的数据，也是填写和选择存放的地方
businessLicense: "", //映射props的数据，也是填写和选择存放的地方
shopPhotos: "", //映射props的数据，也是填写和选择存放的地方
},
};
--------------------------函数
// 打开编辑
editBox(row) { //打开编辑前，把数据放进去
console.log(row);
this.formDit.id = row.id;
this.formDit.shopName = row.shopName;
this.formDit.address = row.address;
this.formDit.businessLicense =
row.businessLicense == "/img/bg/yyzz.png" ? "" : row.businessLicenseList;
this.formDit.shopPhotos = row.shopPhotos;
this.box = true;
},
// 删除图片
uploadDelete(column, file) {
//file.uid是代表你点击的下标
//删除图片是最重要的！，里面必须写Promise，不然上面有一个单图点击删除会报错
//下面Promise里面可以写组件的逻辑，我标志出来了
return new Promise((resolve, reject) => {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
------------------------------写自己的逻辑
console.log(file.uid);
if (file.uid) {
this.formDit.shopPhotos.splice(file.uid, 1);
}
----------------------------------------------
// 重点来了 这里操作完以后 一定一定要resolve出去，因为这样avue会将原来的数据给清除 如果不resolve，那么再添加图片的话 他会把得到的路径与之前的拼接成一个字符串用“，”分割
resolve();
})
.catch(() => {
// 这里也一定一定要reject，虽然不搞 看似好像没问题 保险起见还是给写上，毕竟我不想再爬坑了 哈哈哈
reject();
this.$message({
type: "info",
message: "已取消删除",
});
});
});
},
// 提交编辑
handleSubmit(form, done) {
if (this.formDit.shopPhotos.length < 5) {
this.$message.warning("站点图片必须5张！");
done();
} else {
this.$api
.editUpdate({
id: this.formDit.id,
shopName: this.formDit.shopName,
address: this.formDit.address,
businessLicense: this.formDit.businessLicense,
shopPhotos: this.formDit.shopPhotos.toString(),
})
.then((res) => {
console.log(res);
if (res.code === 0) {
this.$message.success("修改成功！");
this.reload();
}
});
}
},
看到这个就已经结束了，其实没什么难的，但是呢官网也是这个问题，又不跟我们说怎么弄，哎，希望以后Avue官网越来越好吧。
大家看不懂的话多看几遍
注意看注释！！
注意看注释！！
注意看注释！！
我的代码是代码块，复制注意！！！
我是这样完成的，你们注意你们的逻辑就行！
欢迎来评论分享你们的东西，一起学习
看完一间三连！！！！！