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/FileUpload/index.vue | 393 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 215 insertions(+), 178 deletions(-)
diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue
index 841d3ae..6c583cf 100644
--- a/ruoyi-ui/src/components/FileUpload/index.vue
+++ b/ruoyi-ui/src/components/FileUpload/index.vue
@@ -1,178 +1,215 @@
-<template>
- <div class="upload-file">
- <el-upload
- :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"
- class="upload-file-uploader"
- ref="upload"
- >
- <!-- 上传按钮 -->
- <el-button size="mini" type="primary">选取文件</el-button>
- <!-- 上传提示 -->
- <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-upload>
-
- <!-- 文件列表 -->
- <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">
- <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
- </el-link>
- <div class="ele-upload-list__item-content-action">
- <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
- </div>
- </li>
- </transition-group>
- </div>
-</template>
-
-<script>
-import { getToken } from "@/utils/auth";
-
-export default {
- props: {
- // 值
- value: [String, Object, Array],
- // 大小限制(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
- // 文件类型, 例如['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => ["doc", "xls", "ppt", "txt", "pdf"],
- },
- // 是否显示提示
- isShowTip: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
- headers: {
- Authorization: "Bearer " + getToken(),
- },
- fileList: [],
- };
- },
- 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 {
- return [];
- }
- },
- },
- methods: {
- // 上传前校检格式和大小
- handleBeforeUpload(file) {
- // 校检文件类型
- if (this.fileType) {
- let fileExtension = "";
- if (file.name.lastIndexOf(".") > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
- }
- const isTypeOk = this.fileType.some((type) => {
- if (file.type.indexOf(type) > -1) return true;
- if (fileExtension && fileExtension.indexOf(type) > -1) return true;
- return false;
- });
- if (!isTypeOk) {
- 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;
- }
- }
- return true;
- },
- // 文件个数超出
- handleExceed() {
- this.$message.error(`只允许上传单个文件`);
- },
- // 上传失败
- handleUploadError(err) {
- this.$message.error("上传失败, 请重试");
- },
- // 上传成功回调
- handleUploadSuccess(res, file) {
- this.$message.success("上传成功");
- this.$emit("input", res.url);
- },
- // 删除文件
- handleDelete(index) {
- this.fileList.splice(index, 1);
- this.$emit("input", '');
- },
- // 获取文件名称
- getFileName(name) {
- if (name.lastIndexOf("/") > -1) {
- return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
- } else {
- return "";
- }
- }
- },
- created() {
- this.fileList = this.list;
- },
-};
-</script>
-
-<style scoped lang="scss">
-.upload-file-uploader {
- margin-bottom: 5px;
-}
-.upload-file-list .el-upload-list__item {
- border: 1px solid #e4e7ed;
- line-height: 2;
- margin-bottom: 10px;
- position: relative;
-}
-.upload-file-list .ele-upload-list__item-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: inherit;
-}
-.ele-upload-list__item-content-action .el-link {
- margin-right: 10px;
-}
-</style>
\ No newline at end of file
+<template>
+ <div class="upload-file">
+ <el-upload
+ multiple
+ :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"
+ class="upload-file-uploader"
+ ref="fileUpload"
+ >
+ <!-- 上传按钮 -->
+ <el-button size="mini" type="primary">选取文件</el-button>
+ <!-- 上传提示 -->
+ <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-upload>
+
+ <!-- 文件列表 -->
+ <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+ <li :key="file.url" 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">
+ <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+ </div>
+ </li>
+ </transition-group>
+ </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+ name: "FileUpload",
+ props: {
+ // 值
+ value: [String, Object, Array],
+ // 数量限制
+ limit: {
+ type: Number,
+ default: 5,
+ },
+ // 大小限制(MB)
+ fileSize: {
+ type: Number,
+ default: 5,
+ },
+ // 文件类型, 例如['png', 'jpg', 'jpeg']
+ fileType: {
+ type: Array,
+ default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+ },
+ // 是否显示提示
+ isShowTip: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ number: 0,
+ uploadList: [],
+ baseUrl: process.env.VUE_APP_BASE_API,
+ uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
+ headers: {
+ Authorization: "Bearer " + getToken(),
+ },
+ 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);
+ },
+ },
+ methods: {
+ // 上传前校检格式和大小
+ handleBeforeUpload(file) {
+ // 校检文件类型
+ if (this.fileType) {
+ const fileName = file.name.split('.');
+ const fileExt = fileName[fileName.length - 1];
+ const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+ if (!isTypeOk) {
+ 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++;
+ return true;
+ },
+ // 文件个数超出
+ handleExceed() {
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+ },
+ // 上传失败
+ handleUploadError(err) {
+ this.$modal.msgError("上传文件失败，请重试");
+ this.$modal.closeLoading()
+ },
+ // 上传成功回调
+ 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.fileUpload.handleRemove(file);
+ this.uploadedSuccessfully();
+ }
+ },
+ // 删除文件
+ handleDelete(index) {
+ this.fileList.splice(index, 1);
+ this.$emit("input", this.listToString(this.fileList));
+ },
+ // 上传结束处理
+ 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();
+ }
+ },
+ // 获取文件名称
+ getFileName(name) {
+ if (name.lastIndexOf("/") > -1) {
+ return name.slice(name.lastIndexOf("/") + 1);
+ } 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) : '';
+ }
+ }
+};
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+ margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+ border: 1px solid #e4e7ed;
+ line-height: 2;
+ margin-bottom: 10px;
+ position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+ margin-right: 10px;
+}
+</style>
--
Gitblit v1.9.2