elementui组件库非常强大，但是有的组件不一定是非常契合我们实际开发中的项目的，比如文件上传的功能。
大致图片.png
附件后台接口传参类型为string.png
1、表单上传附件
点击上传附件
-
{{ item.fileName }}
通过新增一个div盒子去展示提交到后台的表单附件列表，当打开表单弹窗时，附件列表区域初始化，这时使用upload自身的文件上传组件即可。
2、删除文件以及上传文件都要将文件的名称以及路径存入到数组中方便提交
// 删除
handleRemove(file, fileList) {
// 删除文件时，对提交的文件列表再进一下筛选
this.fileNamesList = [];
this.filePathsList = [];
fileList.forEach((item) => {
this.fileNamesList.push(item.name);
this.filePathsList.push(item.response.data.fileIds[0]);
});
},
//上传图片成功
uploadSuccess(response) {
this.imgUrl = response.data.fileIds[0];
},
// 上传文件成功
uploadFileSuccess(response, file, fileList) {
this.fileNamesList = [];
this.filePathsList = [];
fileList.forEach((item) => {
this.fileNamesList.push(item.name);
this.filePathsList.push(item.response.data.fileIds[0]);
});
},
3、提交表单
Object.assign(this.form, {
coverImg: this.imgUrl,
filePaths: this.filePathsList.join(),
fileNames: this.fileNamesList.join(),
});
addQyNotice(this.form).then((res) => {
if (res.code == 0) {
this.$message({
type: "success",
message: "添加成功",
duration: "1000",
});
this.$refs.upload.clearFiles();
this.$emit("handleSuccess");
}
});
4、编辑时打开弹窗根据接口返回的详细数据进行回显
由于axios是异步请求数据，因此在同步操作时是存在问题的，需要对异步进行async处理。
4.1、使用async处理异步的问题
// 打开弹窗
async handleOpen(row) {
// 清空下载列表
this.$nextTick(()=>{
this.file = [];
this.$refs.upload.clearFiles();
})
if (row) {
this.title = "编辑通知";
// 处理axios异步请求的数据
try {
await noticeDetail(row.id).then((res) => {
if (res.code == 0) {
this.form = res.data;
this.form.sendFlag = this.form.sendFlag.toString();
this.form.fileNames = this.form.fileNames.split(",");
this.form.filePaths = this.form.filePaths.split(",");
this.file = this.form.fileNames.map((fileName, i) => ({
fileName,
filePath: this.form.filePaths[i],
}));
}
});
} catch (error) {
this.$message({
type: "error",
message: error,
duration: "800",
});
}
this.imgUrl = this.form.coverImg;
} else {
this.form = {};
this.imgUrl = false;
this.title = "新增通知";
}
this.dialogVisible = true;
},
4.2、文件回显后删除已上传的文件操作
4.2.1、当鼠标悬浮到已上传的文件区域时，添加icon图标
// 鼠标悬浮事件
handleMouseEnter(row) {
this.row = row;
this.isHover = true;
},
handleMouseLeave(row) {
this.row = row;
this.isHover = false;
},
4.2.2、删除已上传的文件
// 编辑时删除已上传的文件
handleDelete(row) {
// 已上传的文件删除
this.file = this.file.filter((el) => {
if (el.filePath !== row.filePath) {
return el;
}
});
},
4.3、编辑完成后提交修改后的表单数据
根据后台的传参要求将已上传的文件信息做字符串拼接到新上传的文件的字符串后面为一个编辑后的文件信息，然后把整个字符串传给后台。
// 处理已上传的文件做字符串拼接到新上传的文件的字符串后面
let pushFilePaths = this.file.map((item) => {
return item.filePath;
}).join(',');
let pushFileNames = this.file.map((item) => {
return item.fileName;
}).join(',');
let form = {
title: this.form.title,
coverImg: this.form.coverImg,
brief: this.form.brief,
content: this.form.content,
filePaths: this.form.filePaths + "," + pushFilePaths,
fileNames: this.form.fileNames + "," + pushFileNames,
noticeCategory: this.form.noticeCategory,
id: this.form.id,
publishWay: this.form.publishWay,
linkUrl: this.form.linkUrl,
};
editQyNotice(form).then((res) => {
if (res.code == 0) {
this.$message({
type: "success",
message: "编辑成功",
duration: "1000",
});
this.$refs.upload.clearFiles();
this.$emit("handleSuccess");
}
});
4.4、将两个数组合并为一个对象数组
this.form.fileNames = this.form.fileNames.split(",");
this.form.filePaths = this.form.filePaths.split(",");
this.file = this.form.fileNames.map((fileName, i) => ({
fileName,
filePath: this.form.filePaths[i],
}));
4.5、回显展示已上传附件的盒子的css样式
.upload-file-list {
color: #606266;
display: flex;
align-items: center;
margin-right: 40px;
height: 25px;
width: 100%;
margin-top: 5px;
line-height: 25px;
padding-left: 4px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.upload-file-list > span {
margin-left: 7px;
width: 90%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-file-list:hover {
background-color: #f5f7fa;
}
.upload-file-list:hover > span {
color: #409eff;
cursor: pointer;
}