From e447fb806b66adb1150773582ca7c54dd9d09c4f Mon Sep 17 00:00:00 2001 From: RuoYi Date: Thu, 8 Jul 2021 12:36:02 +0800 Subject: [PATCH 1/4] =?UTF-8?q?FileUpload=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/FileUpload/index.vue | 73 +++++++++++--------- 1 file changed, 40 insertions(+), 33 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index d19a0122..649e0772 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; - }, + } }; From e963a86b15583f0099380ae47b429b86be26f363 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Thu, 8 Jul 2021 15:48:11 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/Editor/index.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/ruoyi-ui/src/components/Editor/index.vue b/ruoyi-ui/src/components/Editor/index.vue index d63a48d1..8e616794 100644 --- a/ruoyi-ui/src/components/Editor/index.vue +++ b/ruoyi-ui/src/components/Editor/index.vue @@ -9,7 +9,7 @@ :headers="headers" style="display: none" ref="upload" - v-if="this.uploadUrl" + v-if="this.type == 'url'" >
    @@ -46,14 +46,15 @@ export default { type: Boolean, default: false, }, - /* 上传地址 */ - uploadUrl: { + /* 类型（base64格式、url格式） */ + type: { type: String, default: "", } }, data() { return { + uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 headers: { Authorization: "Bearer " + getToken() }, @@ -119,7 +120,7 @@ export default { const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); // 如果设置了上传地址则自定义图片上传事件 - if (this.uploadUrl) { + if (this.type == 'url') { let toolbar = this.Quill.getModule("toolbar"); toolbar.addHandler("image", (value) => { this.uploadType = "image"; @@ -165,7 +166,7 @@ export default { // 获取光标所在位置 let length = quill.getSelection().index; // 插入图片 res.url为服务器返回的图片地址 - quill.insertEmbed(length, "image", res.url); + quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName); // 调整光标到最后 quill.setSelection(length + 1); } else { From e259093e01a924469ed599fd3311c5b2fc04d49b Mon Sep 17 00:00:00 2001 From: RuoYi Date: Thu, 8 Jul 2021 15:49:04 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=95=B0=E9=87=8F=E9=99=90?= =?UTF-8?q?=E5=88=B6=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/FileUpload/index.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index 649e0772..6e7992ad 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -4,7 +4,9 @@ :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" + :limit="limit" :on-error="handleUploadError" + :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" @@ -44,6 +46,11 @@ export default { props: { // 值 value: [String, Object, Array], + // 数量限制 + limit: { + type: Number, + default: 5, + }, // 大小限制(MB) fileSize: { type: Number, @@ -129,6 +136,10 @@ export default { } return true; }, + // 文件个数超出 + handleExceed() { + this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); + }, // 上传失败 handleUploadError(err) { this.$message.error("上传失败, 请重试"); From f56da498ab4a174e2fe6c6562b36b3a7dcc81cea Mon Sep 17 00:00:00 2001 From: RuoYi Date: Thu, 8 Jul 2021 19:17:09 +0800 Subject: [PATCH 4/4] =?UTF-8?q?ImageUpload=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/FileUpload/index.vue | 13 +- ruoyi-ui/src/components/ImageUpload/index.vue | 202 ++++++++++++++---- ruoyi-ui/src/components/TopNav/index.vue | 4 +- 3 files changed, 165 insertions(+), 54 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index 6e7992ad..bdbb0694 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -163,13 +163,14 @@ export default { return ""; } }, - // 对象转成分隔字符串 - listToString(list) { - let files = ""; - for (let key in list) { - files += list[key].url + ","; + // 对象转成指定字符串分隔 + listToString(list, separator) { + let strs = ""; + separator = separator || ","; + for (let i in list) { + strs += list[i].url + separator; } - return files.substr(0, files.length - 1); + return strs != '' ? strs.substr(0, strs.length - 1) : ''; } } }; diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue index ce540eb8..062e27d4 100644 --- a/ruoyi-ui/src/components/ImageUpload/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -5,33 +5,38 @@ list-type="picture-card" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" + :limit="limit" :on-error="handleUploadError" + :on-exceed="handleExceed" name="file" - :show-file-list="false" + :on-remove="handleRemove" + :show-file-list="true" :headers="headers" - style="display: inline-block; vertical-align: top" + :file-list="fileList" + :on-preview="handlePictureCardPreview" + :class="{hide: this.fileList.length >= this.limit}" > - -
    - -
    -     -
    - -
    -
    - - - - - - -
    -
    -
    + - - + + +
    + 请上传 + + + 的文件 +
    + + +
    @@ -40,36 +45,128 @@ import { getToken } from "@/utils/auth"; export default { + props: { + value: [String, Object, Array], + // 图片数量限制 + limit: { + type: Number, + default: 5, + }, + // 大小限制(MB) + fileSize: { + type: Number, + default: 5, + }, + // 文件类型, 例如['png', 'jpg', 'jpeg'] + fileType: { + type: Array, + default: () => ["png", "jpg", "jpeg"], + }, + // 是否显示提示 + isShowTip: { + type: Boolean, + default: true + } + }, data() { return { + dialogImageUrl: "", dialogVisible: false, + hideUpload: false, + baseUrl: process.env.VUE_APP_BASE_API, uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 headers: { Authorization: "Bearer " + getToken(), }, + fileList: [] }; }, - props: { + watch: { value: { - type: String, - default: "", + handler(val) { + if (val) { + // 首先将值转为数组 + const list = Array.isArray(val) ? val : this.value.split(','); + // 然后将数组转为对象数组 + this.fileList = list.map(item => { + if (typeof item === "string") { + if (item.indexOf(this.baseUrl) === -1) { + item = { name: this.baseUrl + item, url: this.baseUrl + item }; + } else { + item = { name: item, url: item }; + } + } + return item; + }); + } else { + this.fileList = []; + return []; + } + }, + deep: true, + immediate: true + } + }, + computed: { + // 是否显示提示 + showTip() { + return this.isShowTip && (this.fileType || this.fileSize); }, }, methods: { - removeImage() { - this.$emit("input", ""); + // 删除图片 + handleRemove(file, fileList) { + const findex = this.fileList.indexOf(file.name); + this.fileList.splice(findex, 1); + this.$emit("input", this.listToString(this.fileList)); }, + // 上传成功回调 handleUploadSuccess(res) { - this.$emit("input", res.url); + this.fileList.push({ name: res.fileName, url: res.fileName }); + this.$emit("input", this.listToString(this.fileList)); this.loading.close(); }, - handleBeforeUpload() { + // 上传前loading加载 + handleBeforeUpload(file) { + let isImg = false; + if (this.fileType.length) { + let fileExtension = ""; + if (file.name.lastIndexOf(".") > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + } + isImg = this.fileType.some(type => { + if (file.type.indexOf(type) > -1) return true; + if (fileExtension && fileExtension.indexOf(type) > -1) return true; + return false; + }); + } else { + isImg = file.type.indexOf("image") > -1; + } + + if (!isImg) { + this.$message.error( + `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!` + ); + return false; + } + if (this.fileSize) { + const isLt = file.size / 1024 / 1024 < this.fileSize; + if (!isLt) { + this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`); + return false; + } + } this.loading = this.$loading({ lock: true, text: "上传中", background: "rgba(0, 0, 0, 0.7)", }); }, + // 文件个数超出 + handleExceed() { + this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); + }, + // 上传失败 handleUploadError() { this.$message({ type: "error", @@ -77,24 +174,37 @@ export default { }); this.loading.close(); }, - }, - watch: {}, + // 预览 + handlePictureCardPreview(file) { + this.dialogImageUrl = file.url; + this.dialogVisible = true; + }, + // 对象转成指定字符串分隔 + 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) : ''; + } + } }; - \ No newline at end of file +// 去掉动画效果 +::v-deep .el-list-enter-active, +::v-deep .el-list-leave-active { + transition: all 0s; +} + +::v-deep .el-list-enter, .el-list-leave-active { + opacity: 0; + transform: translateY(0); +} + + diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue index d89930a8..c8837f2a 100644 --- a/ruoyi-ui/src/components/TopNav/index.vue +++ b/ruoyi-ui/src/components/TopNav/index.vue @@ -73,9 +73,9 @@ export default { if(router.path === "/") { router.children[item].path = "/redirect/" + router.children[item].path; } else { - if(!this.ishttp(router.children[item].path)) { + if(!this.ishttp(router.children[item].path)) { router.children[item].path = router.path + "/" + router.children[item].path; - } + } } router.children[item].parentPath = router.path; }