+
@@ -153,14 +152,7 @@ import { extname, uuid } from "/@/cool/utils";
import { useBase } from "/$/base";
import { fileSize, fileName, fileType } from "../utils";
import { useForm } from "@cool-vue/crud";
-
-interface Item {
- url: string;
- preload: string;
- uid: number | string;
- progress: number;
- type?: string;
-}
+import { Upload } from "../types";
const props = defineProps({
modelValue: {
@@ -187,6 +179,7 @@ const props = defineProps({
},
drag: Boolean,
disabled: Boolean,
+ customClass: String,
// 穿透值
isEdit: null,
@@ -237,14 +230,14 @@ const headers = computed(() => {
});
// 预览
-const pv = reactive({
+const pv = reactive<{ visible: boolean; urls: string[]; index: number }>({
visible: false,
urls: [],
index: 0
});
// 列表
-const list = ref([]);
+const list = ref([]);
// 拖拽
const drag = reactive({
@@ -273,12 +266,12 @@ function getType(path: string) {
if (props.type == "image") {
return "image";
} else {
- return fileType(path).value;
+ return fileType(path)?.value;
}
}
// 上传前
-function beforeUpload(file: any, item?: Item) {
+function beforeUpload(file: any, item?: Upload.Item) {
if (file.size / 1024 / 1024 >= limitSize) {
ElMessage.error(`上传文件大小不能超过 ${limitSize}MB!`);
return false;
@@ -321,7 +314,7 @@ function clear() {
}
// 预览
-function preview(item: Item) {
+function preview(item: Upload.Item) {
if (item.type == "image") {
pv.visible = true;
pv.urls = list.value.map((e) => e.preload);
diff --git a/src/modules/upload/components/space.vue b/src/modules/upload/components/space.vue
index 4e714e3..17f08a0 100644
--- a/src/modules/upload/components/space.vue
+++ b/src/modules/upload/components/space.vue
@@ -7,7 +7,7 @@
-
+
@@ -49,6 +49,8 @@
+
+
使用选中文件 {{ selection.length }}/{{ limit }}
@@ -72,7 +74,12 @@
v-for="item in list"
:key="item.preload || item.url"
>
-
+
@@ -104,19 +111,19 @@
+
+
diff --git a/src/modules/upload/hooks/index.ts b/src/modules/upload/hooks/index.ts
new file mode 100644
index 0000000..ee05662
--- /dev/null
+++ b/src/modules/upload/hooks/index.ts
@@ -0,0 +1,8 @@
+import { inject } from "vue";
+import { Upload } from "../types";
+
+export function useSpace() {
+ const space = inject("space") as Upload.Space;
+
+ return { space };
+}
diff --git a/src/modules/upload/types/index.d.ts b/src/modules/upload/types/index.d.ts
new file mode 100644
index 0000000..6a0bc98
--- /dev/null
+++ b/src/modules/upload/types/index.d.ts
@@ -0,0 +1,22 @@
+import { Ref } from "vue";
+
+export declare namespace Upload {
+ interface Item {
+ url: string;
+ preload: string;
+ uid: number | string;
+ progress: number;
+ type?: string;
+ }
+
+ interface Space {
+ category: {
+ id: number | undefined;
+ visible: boolean;
+ };
+ list: Ref
;
+ selection: Ref;
+ refresh(params: any): Promise;
+ loading: boolean;
+ }
+}
diff --git a/src/modules/upload/utils/index.ts b/src/modules/upload/utils/index.ts
index 9275ca8..aded129 100644
--- a/src/modules/upload/utils/index.ts
+++ b/src/modules/upload/utils/index.ts
@@ -1,5 +1,34 @@
+import { last } from "lodash-es";
import { filename, extname } from "/@/cool/utils";
+// 文件规则
+const fileRules = [
+ {
+ label: "图片",
+ value: "image",
+ format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
+ color: "#67C23A"
+ },
+ {
+ label: "视频",
+ value: "video",
+ format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
+ color: "#409EFF"
+ },
+ {
+ label: "音频",
+ value: "audio",
+ format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
+ color: "#E6A23C"
+ },
+ {
+ label: "文件",
+ value: "file",
+ format: [],
+ color: "#909399"
+ }
+];
+
// 文件大小
export function fileSize(size: number): string {
if (!size) return "";
@@ -18,36 +47,16 @@ export function fileName(url: string) {
return filename(url.substring(url.indexOf("_") + 1));
}
-// 文件类型
+// 类型信息
export function fileType(path: string) {
- const fs = [
- {
- label: "图片",
- value: "image",
- format: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg", "webp"],
- color: "#67C23A"
- },
- {
- label: "视频",
- value: "video",
- format: ["avi", "wmv", "mpg", "mpeg", "mov", "rm", "ram", "swf", "flv", "mp4"],
- color: "#409EFF"
- },
- {
- label: "音频",
- value: "audio",
- format: ["mp3", "wav", "wma", "mp2", "flac", "midi", "ra", "ape", "aac", "cda"],
- color: "#E6A23C"
- }
- ];
+ const d = fileRules.find((e) => {
+ return e.format.find((a) => a == extname(path).toLocaleLowerCase());
+ });
- return (
- fs.find((e) => {
- return e.format.find((a) => a == extname(path).toLocaleLowerCase());
- }) || {
- label: "文件",
- value: "file",
- color: "#909399"
- }
- );
+ return d || last(fileRules);
+}
+
+// 规则信息
+export function fileRule(value: string) {
+ return fileRules.find((e) => e.value == value);
}