本来是单选上传,接口也是单对单,后来改了需求,要求多选上传,在不让后端改接口的情况下实现了图片的多选上传,主要是on-success是异步提交,无法拿到最后一张上传完成状态,后来换了一种方法实现的。
html部分
(上传中,请稍后)
取消
确定上传
css部分
.screenFrame {
width: 100%;
height: 80%;
margin-top: 10px;
border: 1px solid rgb(196, 196, 196);
.screenFrame-top {
margin: 2% 0 2% 2%;
height: 500px;
width: 98%;
overflow-y: auto;
}
.screenFrame-bottom {
margin: 2% 0;
height: 22%;
width: 100%;
.bottom-left {
float: left;
margin: 10px;
text-align: center;
}
.bottom-right {
float: right;
margin: 10px;
}
}
}
js部分
// 图片上传
uploadImg() {
//打开弹窗前的判断
let list = {
customerId: JSON.parse(localStorage.getItem("login_user")).customerId,
};
getCustomerSpaceSize(list).then((res) => {
if (res.ret_code == 0) {
this.dialogVisibleA = true;
} else {
this.$message.error(res.ret_info);
}
});
},
// 上传之前
handleBeforeUpload(file) {
let list = {
cid: 101,
customerId: JSON.parse(localStorage.getItem("login_user")).customerId,
};
//判断条件(可忽略)
getConfig(list).then((res) => {
this.maxSize = res.ret_data.configValue * 1;
});
this.materialImage.materialSize =
Math.round(file.size / 1024 / 10.24) / 100;
// 获取图片格式
let FileInfo = file.name.split(".");
let fileFormat = FileInfo[FileInfo.length - 1];
// 图片格式限制
if (
fileFormat !== "png" &&
fileFormat !== "jpeg" &&
fileFormat !== "jpg" &&
fileFormat !== "bmp" &&
fileFormat !== "pjp"
) {
this.$message.error("图片格式检测错误,请重新添加!");
return false;
}
this.materialImage.format = fileFormat;
return new Promise(async (resolve, reject) => {
// 失败
if (
this.materialImage.materialSize > this.maxSize ||
this.materialImage.materialSize == this.maxSize
) {
this.$message.error("图片尺寸大小超出限制的部分无法上传!");
reject();
} else {
// 成功
resolve();
}
});
},
//change事件获取到所有待上传图片,主要是为了拿到length
changeImagUpload(file, fileList) {
this.fileList = fileList;
},
// 上传成功之后,调用添加接口
onSuccess(file, val) {
this.disabledA = true;
this.materialImage.materialUrl = file.ret_data;
let picName = val.name.split(".");
let name = picName[picName.length - 2];
this.materialImage.materialName = name;
// 获取上传时间(实时时间)
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// 格式化时间格式
var currentDate =
date.getFullYear() +
"-" +
month +
"-" +
strDate +
" " +
date.getHours() +
":" +
date.getMinutes() +
":" +
date.getSeconds();
this.materialImage.uploadTime = currentDate;
this.materialImage.materialSize =
Math.round(val.size / 1024 / 10.24) / 100;
this.materialImage.type = 0;
// 判断分组(可忽略)
if (
this.selectInline.region == "默认分组" ||
this.selectInline.region == 0
) {
this.groupId = 1;
} else {
let currentData = this.selectGroupList.find((item) => {
return item.id === this.selectInline.region;
});
this.groupId = currentData.id;
}
this.materialImage.groupId = this.groupId;
this.materialImage.customerId = JSON.parse(
localStorage.getItem("login_user")
).customerId;
addMaterial(this.materialImage).then((res) => {
if (res.ret_code == 0) {
this.successSize++;
//接口是单张上传,后来改需求要多张上传,这里因为异步问题,是判断最后一张上传成功才会触发成功事件,否则会有导致奇怪的bug
if (this.fileList.length == this.successSize) {
this.successSize = 0;
this.showAdd = 0;
this.disabledA = false;
this.dialogVisibleA = false;
this.$refs.upload.clearFiles();
this.getMaterialList();
}
} else {
this.$message.error("添加失败!");
this.dialogVisibleA = true;
}
});
},
// 上传取消
unAddFile() {
this.dialogVisibleA = false;
this.$refs.upload.abort();
},
// 上传完成
AddFile() {
this.showAdd = 1;
this.$refs.upload.submit();
},