@@ -40,6 +40,7 @@
:show-file-list="false"
:disabled="disabled"
:limit="9999"
+ :accept="accept"
multiple
@success="onSuccess"
@upload="onUpload"
@@ -119,6 +120,8 @@ const props = defineProps({
limit: Number,
// 是否禁用
disabled: Boolean,
+ // 类型
+ accept: String,
// 显示按钮
showBtn: {
type: Boolean,
@@ -137,7 +140,7 @@ const { app } = useBase();
const { options } = module.get("upload");
// cl-upload
-const Upload = ref
();
+const Upload = ref();
// 选择图片的数量
const limit = props.limit || options.limit?.select;
@@ -181,14 +184,6 @@ watch(
// 是否选中
const isSelected = computed(() => !isEmpty(selection.value));
-// 共享
-provide("space", {
- category,
- selection,
- refresh,
- loading
-});
-
// 打开
function open() {
visible.value = true;
@@ -225,27 +220,33 @@ function onUpload(data: any) {
list.value.unshift(data);
}
+const reqParams = {
+ page: 1
+};
+
// 刷新资源文件
async function refresh(params: any = {}) {
// 清空选择
clear();
- const d = {
+ // 合并参数
+ Object.assign(reqParams, {
+ type: props.accept?.split("/")[0],
...pagination,
...params,
classifyId: category.id
- };
+ });
// 加载中
- if (d.page == 1) {
+ if (reqParams.page == 1) {
loading.value = true;
}
- await service.space.info.page(d).then((res) => {
+ await service.space.info.page(reqParams).then((res) => {
// 合并
Object.assign(pagination, res.pagination);
- if (d.page == 1) {
+ if (reqParams.page == 1) {
list.value = [];
}
@@ -331,6 +332,14 @@ function loadmore() {
}
}
+// 共享
+provide("space", {
+ category,
+ selection,
+ refresh,
+ loading
+});
+
onMounted(() => {
refresh();
});
diff --git a/src/modules/upload/components/space/file-item.vue b/src/modules/upload/components/space/file-item.vue
index 3393ab6..b02141e 100644
--- a/src/modules/upload/components/space/file-item.vue
+++ b/src/modules/upload/components/space/file-item.vue
@@ -30,11 +30,17 @@
{{ fileName(url) }}.{{ extname(url) }}
-
-
- {{ fileSize(info.size) }}
+
+ {{ type.label }}
+
index.value >= 0);
// 地址
const url = computed(() => info.value.preload || info.value.url);
+// 类型
+const type = computed(() => fileType(info.value.url));
+
// 选择
function select() {
emit("select", info.value);
@@ -178,7 +187,7 @@ function onContextMenu(e: any) {
}
}
- &.is-file {
+ &:not(.is-image) {
padding: 10px;
.cl-upload-space-file {
@@ -220,6 +229,17 @@ function onContextMenu(e: any) {
width: calc(100% - 20px);
}
+ &__type {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ color: #fff;
+ background-color: var(--color-primary);
+ font-size: 12px;
+ padding: 2px 5px;
+ border-radius: 3px;
+ }
+
&__error {
padding: 10px;
color: red;
diff --git a/src/modules/upload/utils/index.ts b/src/modules/upload/utils/index.ts
index 3df30c4..9275ca8 100644
--- a/src/modules/upload/utils/index.ts
+++ b/src/modules/upload/utils/index.ts
@@ -1,4 +1,4 @@
-import { filename } from "/@/cool/utils";
+import { filename, extname } from "/@/cool/utils";
// 文件大小
export function fileSize(size: number): string {
@@ -17,3 +17,37 @@ export function fileSize(size: number): string {
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"
+ }
+ ];
+
+ return (
+ fs.find((e) => {
+ return e.format.find((a) => a == extname(path).toLocaleLowerCase());
+ }) || {
+ label: "文件",
+ value: "file",
+ color: "#909399"
+ }
+ );
+}