@@ -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 @@ 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 +77,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: {
// 上传前校检格式和大小
@@ -126,7 +138,7 @@ export default {
},
// 文件个数超出
handleExceed() {
- this.$message.error(`只允许上传单个文件`);
+ this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError(err) {
@@ -135,12 +147,13 @@ export default {
// 上传成功回调
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 @@ export default {
} 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;
- },
+ }
};
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index 17d30d84..f2a7402b 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.data.url);
+ this.fileList.push({ name: res.data.fileName, url: res.data.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) : '';
+ }
+ }
};
-
+
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;
}
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+ 请上传
+ 大小不超过 {{ fileSize }}MB
+ 格式为 {{ fileType.join("/") }}
+ 的文件
+
+
+