FileUpload组件支持多文件上传

This commit is contained in:
RuoYi 2021-07-08 12:36:02 +08:00
parent 90c41d498c
commit e447fb806b
1 changed files with 40 additions and 33 deletions

View File

@ -4,9 +4,7 @@
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="1"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
@ -26,8 +24,8 @@
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
<el-link :href="file.url" :underline="false" target="_blank">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
@ -42,6 +40,7 @@
import { getToken } from "@/utils/auth";
export default {
name: "FileUpload",
props: {
//
value: [String, Object, Array],
@ -63,6 +62,7 @@ export default {
},
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", //
headers: {
Authorization: "Bearer " + getToken(),
@ -70,30 +70,35 @@ export default {
fileList: [],
};
},
watch: {
value: {
handler(val) {
if (val) {
let temp = 1;
//
const list = Array.isArray(val) ? val : this.value.split(',');
//
this.fileList = list.map(item => {
if (typeof item === "string") {
item = { name: item, url: item };
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
this.fileList = [];
return [];
}
},
deep: true,
immediate: true
}
},
computed: {
//
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
//
list() {
let temp = 1;
if (this.value) {
//
const list = Array.isArray(this.value) ? this.value : [this.value];
//
return list.map((item) => {
if (typeof item === "string") {
item = { name: item, url: item };
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
this.fileList = [];
return [];
}
},
},
methods: {
//
@ -124,10 +129,6 @@ export default {
}
return true;
},
//
handleExceed() {
this.$message.error(`只允许上传单个文件`);
},
//
handleUploadError(err) {
this.$message.error("上传失败, 请重试");
@ -135,12 +136,13 @@ export default {
//
handleUploadSuccess(res, file) {
this.$message.success("上传成功");
this.$emit("input", res.url);
this.fileList.push({ name: res.fileName, url: res.fileName });
this.$emit("input", this.listToString(this.fileList));
},
//
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", '');
this.$emit("input", this.listToString(this.fileList));
},
//
getFileName(name) {
@ -149,11 +151,16 @@ export default {
} else {
return "";
}
},
//
listToString(list) {
let files = "";
for (let key in list) {
files += list[key].url + ",";
}
return files.substr(0, files.length - 1);
}
},
created() {
this.fileList = this.list;
},
}
};
</script>