From 56322786887f99604450cde07c9cab6fb5ea5135 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 12 七月 2021 11:39:43 +0800 Subject: [PATCH] !67 同步dev分支 Merge pull request !67 from 疯狂的狮子Li/dev --- ruoyi-ui/src/components/FileUpload/index.vue | 77 ++++++++++++++++++++++++-------------- 1 files changed, 48 insertions(+), 29 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index 81e2b3a..d47fb98 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -4,7 +4,7 @@ :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" - :limit="1" + :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" @@ -26,8 +26,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,9 +42,15 @@ import { getToken } from "@/utils/auth"; export default { + name: "FileUpload", props: { // 鍊� value: [String, Object, Array], + // 鏁伴噺闄愬埗 + limit: { + type: Number, + default: 5, + }, // 澶у皬闄愬埗(MB) fileSize: { type: Number, @@ -63,6 +69,7 @@ }, data() { return { + baseUrl: process.env.VUE_APP_BASE_API, uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 headers: { Authorization: "Bearer " + getToken(), @@ -70,29 +77,34 @@ 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: { @@ -126,7 +138,7 @@ }, // 鏂囦欢涓暟瓒呭嚭 handleExceed() { - this.$message.error(`鍙厑璁镐笂浼犲崟涓枃浠禶); + this.$message.error(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${this.limit} 涓�!`); }, // 涓婁紶澶辫触 handleUploadError(err) { @@ -135,12 +147,13 @@ // 涓婁紶鎴愬姛鍥炶皟 handleUploadSuccess(res, file) { this.$message.success("涓婁紶鎴愬姛"); - this.$emit("input", res.data.url); + this.fileList.push({ name: res.data.fileName, url: res.data.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 +162,17 @@ } else { return ""; } + }, + // 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅� + listToString(list, separator) { + let strs = ""; + separator = separator || ","; + for (let i in list) { + strs += list[i].url + separator; + } + return strs != '' ? strs.substr(0, strs.length - 1) : ''; } - }, - created() { - this.fileList = this.list; - }, + } }; </script> -- Gitblit v1.9.3