From af0e0a110e7187bf008655f7510199a0c0b25ec4 Mon Sep 17 00:00:00 2001
From: Nymph2333 <498092988@qq.com>
Date: 星期一, 10 四月 2023 14:27:40 +0800
Subject: [PATCH] newInstance() 已弃用,使用clazz.getDeclaredConstructor().newInstance() This method propagates any exception thrown by the nullary constructor, including a checked exception. Use of this method effectively bypasses the compile-time exception checking that would otherwise be performed by the compiler. The Constructor.newInstance method avoids this problem by wrapping any exception thrown by the constructor in a (checked) InvocationTargetException. The call clazz.newInstance() can be replaced by clazz.getDeclaredConstructor().newInstance() The latter sequence of calls is inferred to be able to throw the additional exception types InvocationTargetException and NoSuchMethodException. Both of these exception types are subclasses of ReflectiveOperationException.
---
ruoyi-ui/src/components/ImageUpload/index.vue | 242 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 185 insertions(+), 57 deletions(-)
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index 89f0b40..e0140f5 100644
--- a/ruoyi-ui/src/components/ImageUpload/index.vue
+++ b/ruoyi-ui/src/components/ImageUpload/index.vue
@@ -1,32 +1,44 @@
<template>
<div class="component-upload-image">
<el-upload
+ multiple
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
+ :limit="limit"
:on-error="handleUploadError"
- name="file"
- :show-file-list="false"
+ :on-exceed="handleExceed"
+ ref="imageUpload"
+ :on-remove="handleDelete"
+ :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}"
>
- <el-image v-if="!value" :src="value">
- <div slot="error" class="image-slot">
- <i class="el-icon-plus" />
- </div>
- </el-image>
- <div v-else class="image">
- <el-image :src="value" />
- <div class="mask">
- <div class="actions">
- <span title="移除" @click.stop="removeImage">
- <i class="el-icon-delete" />
- </span>
- </div>
- </div>
- </div>
+ <i class="el-icon-plus"></i>
</el-upload>
+
+ <!-- 上传提示 -->
+ <div class="el-upload__tip" slot="tip" v-if="showTip">
+ 请上传
+ <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+ <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+ 的文件
+ </div>
+
+ <el-dialog
+ :visible.sync="dialogVisible"
+ title="预览"
+ width="800"
+ append-to-body
+ >
+ <img
+ :src="dialogImageUrl"
+ style="display: block; max-width: 100%; margin: 0 auto"
+ />
+ </el-dialog>
</div>
</template>
@@ -34,65 +46,181 @@
import { getToken } from "@/utils/auth";
export default {
- components: {},
+ 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 {
+ number: 0,
+ uploadList: [],
+ 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", "");
+ // 上传前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.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+ return false;
+ }
+ if (this.fileSize) {
+ const isLt = file.size / 1024 / 1024 < this.fileSize;
+ if (!isLt) {
+ this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+ return false;
+ }
+ }
+ this.$modal.loading("正在上传图片，请稍候...");
+ this.number++;
},
- handleUploadSuccess(res) {
- this.$emit("input", res.url);
- this.loading.close();
+ // 文件个数超出
+ handleExceed() {
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
- handleBeforeUpload() {
- this.loading = this.$loading({
- lock: true,
- text: "上传中",
- background: "rgba(0, 0, 0, 0.7)",
- });
+ // 上传成功回调
+ handleUploadSuccess(res, file) {
+ if (res.code === 200) {
+ this.uploadList.push({ name: res.fileName, url: res.fileName });
+ this.uploadedSuccessfully();
+ } else {
+ this.number--;
+ this.$modal.closeLoading();
+ this.$modal.msgError(res.msg);
+ this.$refs.imageUpload.handleRemove(file);
+ this.uploadedSuccessfully();
+ }
},
+ // 删除图片
+ handleDelete(file) {
+ const findex = this.fileList.map(f => f.name).indexOf(file.name);
+ if(findex > -1) {
+ this.fileList.splice(findex, 1);
+ this.$emit("input", this.listToString(this.fileList));
+ }
+ },
+ // 上传失败
handleUploadError() {
- this.$message({
- type: "error",
- message: "上传失败",
- });
- this.loading.close();
+ this.$modal.msgError("上传图片失败，请重试");
+ this.$modal.closeLoading();
},
- },
- watch: {},
+ // 上传结束处理
+ uploadedSuccessfully() {
+ if (this.number > 0 && this.uploadList.length === this.number) {
+ this.fileList = this.fileList.concat(this.uploadList);
+ this.uploadList = [];
+ this.number = 0;
+ this.$emit("input", this.listToString(this.fileList));
+ this.$modal.closeLoading();
+ }
+ },
+ // 预览
+ handlePictureCardPreview(file) {
+ this.dialogImageUrl = file.url;
+ this.dialogVisible = true;
+ },
+ // 对象转成指定字符串分隔
+ listToString(list, separator) {
+ let strs = "";
+ separator = separator || ",";
+ for (let i in list) {
+ if (list[i].url) {
+ strs += list[i].url.replace(this.baseUrl, "") + separator;
+ }
+ }
+ return strs != '' ? strs.substr(0, strs.length - 1) : '';
+ }
+ }
};
</script>
-
<style scoped lang="scss">
-.avatar {
- width: 100%;
- height: 100%;
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+ display: none;
}
-.image {
- position: relative;
- .mask {
+// 去掉动画效果
+::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;
- position: absolute;
- top: 0;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- transition: all 0.3s;
- }
- &:hover .mask {
- opacity: 1;
- }
+ transform: translateY(0);
}
-</style>
\ No newline at end of file
+</style>
+
--
Gitblit v1.9.2