diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index d19a01225..649e07721 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -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 @@ -
  • - +
  • + {{ getFileName(file.name) }}
    @@ -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; - }, + } };