Avue upload上传组件回显文件名，并下载或打开图片
重点就是在uploadAfter方法中添加文件名后缀，和uploadPreview方法中去掉后缀
// 新增附件上传
tempfileList:[],
{
label: "",
prop: "",
span: 24,
arrow: false,
collapse: true,
display: true,
column: [
{
label: "附件",
prop: "attachment",
span: 24,
type: "upload",
labelWidth: 80,
display: true,
loadText: "附件上传中，请稍等",
dataType: "string",
multiple: true,
showFileList: true,
tip: "文件大小不超过20Mb",
props: {
value: "url", //看文档有解释
label: "url", //看文档有解释
},
propsHttp: {
res: "data",
url: "filePath",
name: "fileName",
home: upload.home,
},
action: upload.action,
data: {
fileType: 1,
},
uploadPreview: (file, column, done) => {
//重点***
const lastIndex = file.url.lastIndexOf("/");
const url = file.url.slice(0, lastIndex);
window.open(url, "_blank");
return;
},
uploadBefore: (file, done, loading) => {
this.currentFileName = file.name;
let newFile = new File([file], file.name, {
type: file.type,
});
if (newFile.size > 20971520) {
this.$message.warning("文件大小不超过20Mb");
loading();
return;
}
done(newFile);
},
uploadAfter: (file, done) => {
this.tempfileList.push({
attachment: file.filePath });
//重点***
file.filePath = file.filePath + "/" + file.fileName;
done();
},
uploadDelete: (file) => {
this.tempfileList.splice(Number(file.uid), 1);
},
},
],
},
如果小伙伴有更好的解决办法，欢迎补充~