From e965ac6eb7f0e742326662c42aa6d2643a6e66d3 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 15 Aug 2024 19:06:56 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=B8=8A=E4=BC=A0=E9=99=84=E4=BB=B6=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83=20sws=202024-08-15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/upload.ts                             |   7 +-
 src/components/common/upload/index.vue        |  39 +-
 .../common/upload/upload-model copy 2.vue     | 570 +++++++++++++++++
 .../common/upload/upload-model copy 3.vue     | 583 +++++++++++++++++
 .../common/upload/upload-model copy.vue       | 588 ++++++++++++++++++
 src/components/common/upload/upload-model.vue |  98 ++-
 src/components/page-settings/page-content.vue |   2 +-
 src/layout/components/main/index.vue          |  12 +-
 src/utils/request.ts                          |   2 +-
 9 files changed, 1849 insertions(+), 52 deletions(-)
 create mode 100644 src/components/common/upload/upload-model copy 2.vue
 create mode 100644 src/components/common/upload/upload-model copy 3.vue
 create mode 100644 src/components/common/upload/upload-model copy.vue

diff --git a/src/api/upload.ts b/src/api/upload.ts
index 8f31fab6..f0320c88 100644
--- a/src/api/upload.ts
+++ b/src/api/upload.ts
@@ -1,4 +1,5 @@
 import request from '@/utils/request';
+import { AxiosRequestConfig } from 'axios';
 
 class UploadAPI {
     /**  分类查询接口*/
@@ -58,11 +59,15 @@ class UploadAPI {
         });
     }
     // 附件上传
-    static uploadAttachment(data: any) {
+    static uploadAttachment(data: any, progress: any) {
         return request({
             url: `diyapi/attachmentupload`,
             method: 'post',
             data,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+            onUploadProgress: progress,
         });
     }
 }
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index b35a7de4..1898da15 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -49,7 +49,7 @@
                         <el-button @click="mult_del_event">删除{{ upload_type_name }}</el-button>
                         <!-- <el-cascader :show-all-levels="false" clearable></el-cascader> -->
                         <div class="right-classify ml-12">
-                            <transform-category :data="type_data" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'"></transform-category>
+                            <transform-category :data="type_data_list" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'"></transform-category>
                         </div>
                     </div>
                     <div class="right-search">
@@ -248,7 +248,8 @@ watch(
     () => dialog_visible.value,
     (val) => {
         if (val) {
-            type_data.value = upload_store.category;
+            type_data_list.value = upload_store.category;
+            type_data.value = [all_tree, ...upload_store.category];
             get_attachment_list();
         }
     }
@@ -257,14 +258,14 @@ watch(
 // 文件后缀分类
 const ext_img_name_list = ref(['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif']);
 const ext_video_name_list = ref(['.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg', '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm']);
-const ext_file_name_list = ref(['.png', 'jpg', 'jpeg', 'bmp', 'webp', 'gif', '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg', '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.csv', '.wav', '.mid', '.cab', '.iso', '.ofd', '.xml', '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.vsd']);
+const ext_file_name_list = ref(['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif', '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg', '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.csv', '.wav', '.mid', '.cab', '.iso', '.ofd', '.xml', '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.vsd','.sql']);
 const ext_file_name_list_map = ref([
     { type: '.png', icon: 'error-img' },
-    { type: 'jpg', icon: 'error-img' },
-    { type: 'jpeg', icon: 'error-img' },
-    { type: 'bmp', icon: 'error-img' },
-    { type: 'webp', icon: 'error-img' },
-    { type: 'gif', icon: 'error-img' },
+    { type: '.jpg', icon: 'error-img' },
+    { type: '.jpeg', icon: 'error-img' },
+    { type: '.bmp', icon: 'error-img' },
+    { type: '.webp', icon: 'error-img' },
+    { type: '.gif', icon: 'error-img' },
     { type: '.flv', icon: 'video' },
     { type: '.swf', icon: 'video' },
     { type: '.mkv', icon: 'video' },
@@ -287,6 +288,7 @@ const ext_file_name_list_map = ref([
     { type: '.iso', icon: 'file' },
     { type: '.ofd', icon: 'file' },
     { type: '.xml', icon: 'file' },
+    { type: '.sql', icon: 'file' },
     { type: '.rar', icon: 'zip' },
     { type: '.zip', icon: 'zip' },
     { type: '.tar', icon: 'zip' },
@@ -341,21 +343,22 @@ const filter_node = (value: string, data: any): boolean => {
     return data.name.indexOf(value) !== -1;
 };
 const type_data = ref<Tree[]>([]);
+const all_tree = {
+    id: '',
+    pid: '',
+    name: '全部',
+    path: '',
+    is_enable: 1,
+    sort: '',
+};
+const type_data_list = ref<Tree[]>([]);
 // 查询分类列表
 const get_tree = () => {
     UploadAPI.getTree().then((res) => {
-        const all_tree = {
-            id: '',
-            pid: '',
-            name: '全部',
-            path: '',
-            is_enable: 1,
-            sort: '',
-        };
         // 将all_tree和res.data.category_list全部插入到type_data.value,all_tree放在数组最前面
         type_data.value = [all_tree, ...res.data.category_list];
-
-        upload_store.set_category(type_data.value);
+        type_data_list.value = res.data.category_list;
+        upload_store.set_category(type_data_list.value);
     });
 };
 
diff --git a/src/components/common/upload/upload-model copy 2.vue b/src/components/common/upload/upload-model copy 2.vue
new file mode 100644
index 00000000..81a647e7
--- /dev/null
+++ b/src/components/common/upload/upload-model copy 2.vue	
@@ -0,0 +1,570 @@
+<!-- 上传组件 -->
+<template>
+    <el-dialog v-model="dialogVisible" class="radius-lg" width="1168" append-to-body>
+        <template #header>
+            <div class="title center re">
+                <div class="tc size-16 fw">{{ upload_type_name }}上传</div>
+            </div>
+        </template>
+        <div class="upload-content pa-20" @paste="handle_paste">
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="85" status-icon>
+                <el-form-item label="上传方式">
+                    <el-radio-group v-model="form.type" @change="upload_type_change">
+                        <el-radio value="loc">本地上传</el-radio>
+                        <el-radio value="scan">扫码上传</el-radio>
+                        <el-radio v-if="upload_type !== 'file'" value="web">网络上传</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上传至分组" prop="category_id">
+                    <div class="form-item-width">
+                        <el-cascader v-model="form.category_id" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="category_id_change"></el-cascader>
+                    </div>
+                </el-form-item>
+                <template v-if="form.type == 'loc'">
+                    <div class="flex-row jc-sb align-c mt-30">
+                        <div class="flex-row">
+                            <el-upload ref="fileUpload1" v-model:file-list="file_list" multiple action="#" :accept="exts_text" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed">
+                                <template #trigger>
+                                    <el-button @click="folder_mode(false)"> 上传{{ upload_type_name }} </el-button>
+                                    <el-button @click="folder_mode(true)"> 上传文件夹 </el-button>
+                                </template>
+                            </el-upload>
+                        </div>
+                        <el-button @click="clear_list_event">清空列表</el-button>
+                    </div>
+                    <div class="table mt-10">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell">上传状态</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <div id="dropzone" @dragover.prevent="handle_drag_in" @dragenter="handle_drag_in" @dragleave="handle_drag_leave" @drop.prevent="handle_drop">
+                            <el-scrollbar v-if="!is_dragging && form.file.length > 0" height="341px">
+                                <div class="table-body">
+                                    <div v-for="(item, index) in form.file" :key="item.file.name + item.file.size" class="table-row">
+                                        <div class="table-cell">
+                                            <el-image :src="file_to_base64(item.file)" class="preview-img radius-sm" fit="contain">
+                                                <template #error>
+                                                    <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                        <icon name="error-img" size="12"></icon>
+                                                    </div>
+                                                </template>
+                                            </el-image>
+                                            <div class="desc">{{ item.file.name }}</div>
+                                        </div>
+                                        <div class="table-cell">{{ annex_size_to_unit(item.file.size) }}</div>
+                                        <div class="table-cell">{{ item.status }}</div>
+                                        <div class="table-cell-oprate" @click="del_upload(index)">移除</div>
+                                    </div>
+                                </div>
+                            </el-scrollbar>
+                            <div v-show="is_dragging || form.file.length < 1" class="folder-upload mt-20" :class="is_dragging ? 'active' : ''">
+                                <el-upload ref="fileUpload2" v-model:file-list="file_list" :accept="exts_text" multiple action="#" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed">
+                                    <div class="flex-col jc-c align-c">
+                                        <icon name="add" size="60" color="#dbeef6"></icon>
+                                        <p class="size-18 cr-c fw">请将需要上传的文件/文件夹拖到此处或粘贴</p>
+                                    </div>
+                                </el-upload>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'scan'">
+                    <el-form-item label="二维码" class="mb-10">
+                        <qrcode :src="form.qrcode" :is-mask="is_mask"></qrcode>
+                    </el-form-item>
+                    <div class="table">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <el-scrollbar height="224px">
+                            <div class="table-body">
+                                <div v-for="(item, index) in scan_file_list" :key="item.name + item.size" class="table-row">
+                                    <div class="table-cell">
+                                        <el-image :src="item.url" class="preview-img radius-sm" fit="contain">
+                                            <template #error>
+                                                <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                    <icon name="error-img" size="12"></icon>
+                                                </div>
+                                            </template>
+                                        </el-image>
+                                        <div class="desc">{{ item.name }}</div>
+                                    </div>
+                                    <div class="table-cell">{{ annex_size_to_unit(item.size) }}</div>
+                                    <div class="table-cell-oprate" @click="del_already_upload(index)">删除</div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'web'">
+                    <el-form-item label="网络图片">
+                        <div class="flex-row align-c gap-10">
+                            <el-input v-model="form.web_image" class="form-item-width" placeholder="请输入网络图片地址" />
+                            <div class="c-pointer cr-primary size-12" @click="extract_images">提取图片</div>
+                        </div>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button class="plr-28 ptb-10" @click="close_dialog">取消</el-button>
+                <el-button v-if="form.type == 'loc'" class="plr-28 ptb-10" type="primary" @click="submit_event(ruleFormRef)">上传</el-button>
+                <el-button v-else-if="form.type == 'scan'" class="plr-28 ptb-10" type="primary" @click="close_dialog">返回图库</el-button>
+                <el-button v-else-if="form.type == 'web'" class="plr-28 ptb-10" type="primary" @click="close_all_dialog">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import UploadAPI, { Tree } from '@/api/upload';
+import { uploadrStore } from '@/store';
+const upload_store = uploadrStore();
+import type { UploadFile, UploadFiles, UploadUserFile, FormRules, FormInstance } from 'element-plus';
+import { annex_size_to_unit, ext_name } from '@/utils';
+/**
+ * @description: 图片执行上传弹窗
+ * @param close{String} 默认值
+ * @return {*} close
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'img', // img/video/file
+    },
+    limit: {
+        type: Number,
+        default: 10000,
+    },
+    exts: {
+        type: Array,
+        default: () => ['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif'],
+    },
+    fileSize: {
+        type: Number,
+        default: 1024 * 1024,
+    },
+});
+const dialogVisible = defineModel({ type: Boolean, default: false });
+// 上传类型
+const upload_type = ref(props.type);
+// 上传类型转换成name
+const upload_type_name = computed(() => {
+    return upload_type.value === 'img' ? '图片' : upload_type.value === 'video' ? '视频' : '文件';
+});
+// 格式限制
+const exts_text = ref(props.exts.join(','));
+const file_list = ref<UploadUserFile[]>([]);
+interface fileData {
+    file: File;
+    status: string;
+}
+interface formData {
+    type: string;
+    category_id: string;
+    file: fileData[];
+    qrcode: string;
+    web_image: string;
+}
+const ruleFormRef = ref<FormInstance>();
+const form = ref<formData>({
+    type: 'loc',
+    category_id: '',
+    file: [],
+    qrcode: '11223344',
+    web_image: '',
+});
+const rules = reactive<FormRules>({
+    category_id: [{ required: true, trigger: 'change', message: '请选择分组' }],
+});
+// 是否给二维码加模糊效果
+const is_mask = ref(true);
+const timer = ref<number | null>(null);
+// 上传方式
+const upload_type_change = (type: any) => {
+    // 清除之前的定时器（如果存在）
+    if (timer.value) {
+        // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+        clearTimeout(timer.value);
+        timer.value = null; // 清除引用，防止内存泄漏
+    }
+    // 如果需要设置新的定时器
+    if (type === 'scan') {
+        timer.value = setInterval(() => {
+            console.log('timer-----定时调用');
+            // 此处写定时调用接口，获取文件列表
+        }, 3000);
+    }
+};
+// 选择分组
+const category_id_change = (val: any) => {
+    console.log(val);
+    if (val && val.length > 0) {
+        is_mask.value = false;
+    }
+};
+
+// 使用计算属性获取级联数据 // 图片/视频/文件移动至
+const cascader_data = computed(() => {
+    return upload_store.category.map((tree: Tree) => ({
+        value: tree.id,
+        label: tree.name,
+        children: tree.items?.map((item: Tree) => ({
+            value: item.id,
+            label: item.name,
+        })),
+    }));
+});
+
+//#region 本地上传 -----------------------------------------------start
+
+// 选择文件夹
+const state = reactive({
+    uploadEle: null as HTMLInputElement | null,
+    uploadList: [],
+});
+const folder_mode = (type: boolean) => {
+    if (!state.uploadEle) {
+        state.uploadEle = document.querySelector('.el-upload__input') as HTMLInputElement;
+    }
+    nextTick(() => {
+        (state.uploadEle as HTMLInputElement).webkitdirectory = type;
+        // console.log(state.uploadEle);
+    });
+};
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const upload_change = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    // console.log('文件状态改变时的钩子', uploadFile, uploadFiles);
+    // // 过滤已上传的文件和重复的文件
+    const results = uploadFiles.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    const new_upload_files = results.filter((item: UploadFile) => {
+        return !form.value.file.find((item2: fileData) => {
+            return item2.file.name === item.name && item2.file.size === item.size;
+        });
+    });
+    // 将过滤后的数组和form.file数组合并
+    new_upload_files.forEach((item: UploadFile) => {
+        // item.status = 'ready';
+        const new_file_obj = {
+            status: '等待上传',
+            file: item.raw as File,
+        };
+        form.value.file.push(new_file_obj);
+        console.log(form.value.file);
+    });
+};
+// 上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
+const validExt = (name: string) => props.exts.includes(ext_name(name));
+const validSize = (size: number) => size <= props.fileSize;
+// 上传前的钩子
+const before_upload = (file: any) => {
+    // 检查文件是否为图片
+    if (validExt(file.name) && validSize(file.size)) {
+        console.log('允许上传');
+        return true; // 允许上传
+    } else {
+        console.log('不允许上传');
+        return false; // 不允许上传
+    }
+};
+// 超出限制时的钩子
+const handle_exceed = (files: any, fileList: any) => {
+    ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+};
+// 清空列表
+const clear_list_event = () => {
+    form.value.file = [];
+    file_list.value = [];
+};
+const is_dragging = ref(false);
+// 引用dropzone DOM元素以便在dragLeave中检查
+const dropzone = ref<HTMLElement | null>(null);
+onMounted(() => {
+    dropzone.value = document.getElementById('dropzone') as HTMLElement;
+});
+
+// 拖拽事件 和 列表拖动文件进入触发事件
+const handle_drag_in = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    is_dragging.value = true;
+};
+// 列表拖动文件离开触发事件
+const handle_drag_leave = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // 使用一个变量来跟踪鼠标是否离开了dropzone
+    const leaveTimer = setTimeout(() => {
+        // 确保鼠标不在dropzone或其子元素中
+        if (!document.getElementById('dropzone')?.contains(event.relatedTarget as Node)) {
+            is_dragging.value = false;
+        }
+    }, 50); // 延迟50毫秒
+
+    // 当鼠标重新进入dropzone时，清除定时器
+    event.currentTarget?.addEventListener(
+        'dragenter',
+        () => {
+            clearTimeout(leaveTimer);
+        },
+        { once: true }
+    );
+};
+// 松开拖拽的文件 获取文件信息
+const handle_drop = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    is_dragging.value = false;
+    let results = await Promise.all([...event.dataTransfer.items].map((item) => handle_entry(item.webkitGetAsEntry())));
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    results = results.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        results.forEach((file: any) => {
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+/**
+ * 处理文件/目录并返回一个Promise。
+ * 此函数旨在处理文件/目录，无论是文件还是目录。如果是文件，则直接以文件形式解析并解决Promise。如果是目录，则递归处理目录中的所有文件。
+ * @param {any} entry 文件/目录，可以是文件或目录。
+ * @returns {Promise<any[]>} 返回一个Promise，解析为一个数组，包含所有条目的文件对象。
+ */
+const handle_entry = (entry: any) => {
+    return new Promise((resolve) => {
+        // 如果entry是一个文件
+        if (entry.isFile) {
+            // 直接以文件形式解析Promise
+            entry.file(resolve);
+            return;
+        }
+        // 如果entry是一个目录
+        const dirReader = entry.createReader();
+        dirReader.readEntries(async (entries: any) => {
+            // 递归处理目录中的所有条目，并通过Promise.all等待所有处理完成
+            resolve(await Promise.all(entries.map(handle_entry)));
+        });
+    });
+};
+// 移除文件
+const del_upload = (index: number) => {
+    // 根据下标删除文件
+    form.value.file.splice(index, 1);
+    file_list.value.splice(index, 1);
+};
+// 粘贴上传
+const handle_paste = (event: any) => {
+    console.log(event);
+    // 获取粘贴板中的文件列表
+    const files = event.clipboardData.files;
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    const results = [...files].filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        console.log(results);
+        results.forEach((file: any) => {
+            // 判断是否重复
+            // 如果上传列表中没有与当前文件相同的文件，则添加到上传列表中
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            } else {
+                ElMessageBox.alert(`文件 ${file.name} 已存在!`);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+
+// 执行上传
+const submit_event = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            const formData = new FormData();
+            formData.append('type', props.type == 'img' ? 'image' : props.type == 'video' ? 'video' : props.type == 'file' ? 'file' : '');
+            formData.append('category_id', form.value.category_id);
+            form.value.file.forEach((item: any) => {
+                formData.append('upfile', item.file);
+                item.status = '上传中';
+            });
+            // UploadAPI.uploadAttachment(formData).then((res) => {
+            //     ElMessage.success('上传成功');
+            //     form.value.file.forEach((item: any) => {
+            //         item.status = '上传完成';
+            //     });
+            // });
+        } else {
+            console.log('error submit!', fields);
+        }
+    });
+};
+
+//#endregion 本地上传 -----------------------------------------------end
+
+//#region 扫码上传 -----------------------------------------------start
+interface scanFile {
+    name: string;
+    url: string;
+    size: number;
+}
+const scan_file_list = ref<scanFile[]>([
+    { name: '1', url: '1', size: 0 },
+    { name: '2', url: '2', size: 0 },
+    { name: '3', url: '3', size: 0 },
+    { name: '4', url: '4', size: 0 },
+    { name: '5', url: '5', size: 0 },
+]);
+// 删除已上传的文件
+const del_already_upload = (index: number) => {
+    // 根据下标删除文件
+    scan_file_list.value.splice(index, 1);
+    // 调接口真实删除
+};
+//#endregion 扫码上传 -----------------------------------------------end
+
+//#region 网络上传 -----------------------------------------------start
+// 提取图片
+const extract_images = () => {
+    // 此处调用接口获取提取后的图片更新输入框的地址，改为在线地址
+    ElMessage({
+        type: 'success',
+        message: '提取成功!',
+    });
+};
+const emit = defineEmits(['close']);
+// 关闭所有弹窗
+const close_all_dialog = () => {
+    const new_form = JSON.parse(JSON.stringify(form.value));
+    emit('close', new_form);
+    close_dialog();
+};
+//#endregion 网络上传 -----------------------------------------------end
+
+// file转换成base64
+const file_to_base64 = (file: any) => {
+    return URL.createObjectURL(file);
+};
+// 关闭弹窗
+const close_dialog = () => {
+    dialogVisible.value = false;
+    form.value = {
+        type: 'loc',
+        category_id: '',
+        file: [],
+        qrcode: '',
+        web_image: '',
+    };
+    scan_file_list.value = [];
+    // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+    if (timer.value !== null) {
+        clearTimeout(timer.value);
+    }
+    timer.value = null; // 清除引用，防止内存泄漏
+};
+</script>
+<style lang="scss" scoped>
+.upload-content {
+    height: 57.4rem;
+    gap: 4.5rem;
+    .table {
+        width: 100%;
+        height: 30rem;
+        .table-header,
+        .table-body {
+            .table-row {
+                display: flex;
+                width: 100%;
+                border-bottom: 0.1rem solid #eee;
+                color: #999;
+                font-size: 1.4rem;
+                .table-cell {
+                    flex: 1;
+                    padding: 1rem;
+                    color: #666;
+                    display: flex;
+                    align-items: center;
+                    word-break: break-all;
+                    gap: 1rem;
+                    .preview-img {
+                        width: 2.8rem;
+                        height: 2.8rem;
+                    }
+                    .desc {
+                        flex: 1;
+                        width: 0;
+                    }
+                }
+                .table-cell-oprate {
+                    padding: 1rem;
+                    width: 5rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    word-break: break-all;
+                }
+            }
+        }
+        .table-body {
+            .table-cell,
+            .table-cell-oprate {
+                padding: 1.5rem 1rem !important;
+            }
+            .table-cell-oprate {
+                color: $cr-primary;
+            }
+        }
+        .folder-upload {
+            background: #fafcff;
+            border-radius: 0.2rem;
+            border: 0.1rem dashed #afdafa;
+            height: 32rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            .active {
+                background-color: #eef5ff;
+                border-color: #35a9ff;
+            }
+        }
+    }
+    .form-item-width {
+        width: 33.5rem !important;
+    }
+}
+</style>
diff --git a/src/components/common/upload/upload-model copy 3.vue b/src/components/common/upload/upload-model copy 3.vue
new file mode 100644
index 00000000..1a5fe344
--- /dev/null
+++ b/src/components/common/upload/upload-model copy 3.vue	
@@ -0,0 +1,583 @@
+<!-- 上传组件 -->
+<template>
+    <el-dialog v-model="dialogVisible" class="radius-lg" width="1168" append-to-body>
+        <template #header>
+            <div class="title center re">
+                <div class="tc size-16 fw">{{ upload_type_name }}上传</div>
+            </div>
+        </template>
+        <div class="upload-content pa-20" @paste="handle_paste">
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="85" status-icon>
+                <el-form-item label="上传方式">
+                    <el-radio-group v-model="form.type" @change="upload_type_change">
+                        <el-radio value="loc">本地上传</el-radio>
+                        <el-radio value="scan">扫码上传</el-radio>
+                        <el-radio v-if="upload_type !== 'file'" value="web">网络上传</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上传至分组" prop="category_id">
+                    <div class="form-item-width">
+                        <el-cascader v-model="form.category_id" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="category_id_change"></el-cascader>
+                    </div>
+                </el-form-item>
+                <template v-if="form.type == 'loc'">
+                    <div class="flex-row jc-sb align-c mt-30">
+                        <div class="flex-row">
+                            <el-upload ref="fileUpload1" v-model:file-list="file_list" multiple action="#" :accept="exts_text" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed">
+                                <template #trigger>
+                                    <el-button @click="folder_mode(false)"> 上传{{ upload_type_name }} </el-button>
+                                    <el-button @click="folder_mode(true)"> 上传文件夹 </el-button>
+                                </template>
+                            </el-upload>
+                        </div>
+                        <el-button @click="clear_list_event">清空列表</el-button>
+                    </div>
+                    <div class="table mt-10">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell">上传状态</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <div id="dropzone" @dragover.prevent="handle_drag_in" @dragenter="handle_drag_in" @dragleave="handle_drag_leave" @drop.prevent="handle_drop">
+                            <el-scrollbar v-if="!is_dragging && form.file.length > 0" height="341px">
+                                <div class="table-body">
+                                    <div v-for="(item, index) in form.file" :key="item.file.name + item.file.size" class="table-row">
+                                        <div class="table-cell">
+                                            <el-image :src="file_to_base64(item.file)" class="preview-img radius-sm" fit="contain">
+                                                <template #error>
+                                                    <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                        <icon name="error-img" size="12"></icon>
+                                                    </div>
+                                                </template>
+                                            </el-image>
+                                            <div class="desc">{{ item.file.name }}</div>
+                                        </div>
+                                        <div class="table-cell">{{ annex_size_to_unit(item.file.size) }}</div>
+                                        <div class="table-cell">{{ item.status }}</div>
+                                        <div class="table-cell-oprate" @click="del_upload(index)">移除</div>
+                                    </div>
+                                </div>
+                            </el-scrollbar>
+                            <div v-show="is_dragging || form.file.length < 1" class="folder-upload mt-20" :class="is_dragging ? 'active' : ''">
+                                <el-upload ref="fileUpload2" v-model:file-list="file_list" :accept="exts_text" multiple action="#" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed">
+                                    <div class="flex-col jc-c align-c">
+                                        <icon name="add" size="60" color="#dbeef6"></icon>
+                                        <p class="size-18 cr-c fw">请将需要上传的文件/文件夹拖到此处或粘贴</p>
+                                    </div>
+                                </el-upload>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'scan'">
+                    <el-form-item label="二维码" class="mb-10">
+                        <qrcode :src="form.qrcode" :is-mask="is_mask"></qrcode>
+                    </el-form-item>
+                    <div class="table">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <el-scrollbar height="224px">
+                            <div class="table-body">
+                                <div v-for="(item, index) in scan_file_list" :key="item.name + item.size" class="table-row">
+                                    <div class="table-cell">
+                                        <el-image :src="item.url" class="preview-img radius-sm" fit="contain">
+                                            <template #error>
+                                                <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                    <icon name="error-img" size="12"></icon>
+                                                </div>
+                                            </template>
+                                        </el-image>
+                                        <div class="desc">{{ item.name }}</div>
+                                    </div>
+                                    <div class="table-cell">{{ annex_size_to_unit(item.size) }}</div>
+                                    <div class="table-cell-oprate" @click="del_already_upload(index)">删除</div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'web'">
+                    <el-form-item label="网络图片">
+                        <div class="flex-row align-c gap-10">
+                            <el-input v-model="form.web_image" class="form-item-width" placeholder="请输入网络图片地址" />
+                            <div class="c-pointer cr-primary size-12" @click="extract_images">提取图片</div>
+                        </div>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button class="plr-28 ptb-10" @click="close_dialog">取消</el-button>
+                <el-button v-if="form.type == 'loc'" class="plr-28 ptb-10" type="primary" @click="submit_event(ruleFormRef)">上传</el-button>
+                <el-button v-else-if="form.type == 'scan'" class="plr-28 ptb-10" type="primary" @click="close_dialog">返回图库</el-button>
+                <el-button v-else-if="form.type == 'web'" class="plr-28 ptb-10" type="primary" @click="close_all_dialog">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import UploadAPI, { Tree } from '@/api/upload';
+import { uploadrStore } from '@/store';
+const upload_store = uploadrStore();
+import type { UploadFile, UploadFiles, UploadUserFile, FormRules, FormInstance } from 'element-plus';
+import { annex_size_to_unit, ext_name } from '@/utils';
+/**
+ * @description: 图片执行上传弹窗
+ * @param close{String} 默认值
+ * @return {*} close
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'img', // img/video/file
+    },
+    limit: {
+        type: Number,
+        default: 10000,
+    },
+    exts: {
+        type: Array,
+        default: () => ['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif'],
+    },
+    fileSize: {
+        type: Number,
+        default: 1024 * 1024 * 1024,
+    },
+});
+const dialogVisible = defineModel({ type: Boolean, default: false });
+// 上传类型
+const upload_type = ref(props.type);
+// 上传类型转换成name
+const upload_type_name = computed(() => {
+    return upload_type.value === 'img' ? '图片' : upload_type.value === 'video' ? '视频' : '文件';
+});
+// 格式限制
+const exts_text = ref(props.exts.join(','));
+const file_list = ref<UploadUserFile[]>([]);
+interface fileData {
+    file: File;
+    status: string;
+    progress: number;
+}
+interface formData {
+    type: string;
+    category_id: string;
+    file: fileData[];
+    qrcode: string;
+    web_image: string;
+}
+const ruleFormRef = ref<FormInstance>();
+const form = ref<formData>({
+    type: 'loc',
+    category_id: '',
+    file: [],
+    qrcode: '11223344',
+    web_image: '',
+});
+const rules = reactive<FormRules>({
+    category_id: [{ required: true, trigger: 'change', message: '请选择分组' }],
+});
+// 是否给二维码加模糊效果
+const is_mask = ref(true);
+const timer = ref<number | null>(null);
+// 上传方式
+const upload_type_change = (type: any) => {
+    // 清除之前的定时器（如果存在）
+    if (timer.value) {
+        // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+        clearTimeout(timer.value);
+        timer.value = null; // 清除引用，防止内存泄漏
+    }
+    // 如果需要设置新的定时器
+    if (type === 'scan') {
+        timer.value = setInterval(() => {
+            console.log('timer-----定时调用');
+            // 此处写定时调用接口，获取文件列表
+        }, 3000);
+    }
+};
+// 选择分组
+const category_id_change = (val: any) => {
+    console.log(val);
+    if (val && val.length > 0) {
+        is_mask.value = false;
+    }
+};
+
+// 使用计算属性获取级联数据 // 图片/视频/文件移动至
+const cascader_data = computed(() => {
+    return upload_store.category.map((tree: Tree) => ({
+        value: tree.id,
+        label: tree.name,
+        children: tree.items?.map((item: Tree) => ({
+            value: item.id,
+            label: item.name,
+        })),
+    }));
+});
+
+//#region 本地上传 -----------------------------------------------start
+
+// 选择文件夹
+const state = reactive({
+    uploadEle: null as HTMLInputElement | null,
+    uploadList: [],
+});
+const folder_mode = (type: boolean) => {
+    if (!state.uploadEle) {
+        state.uploadEle = document.querySelector('.el-upload__input') as HTMLInputElement;
+    }
+    nextTick(() => {
+        (state.uploadEle as HTMLInputElement).webkitdirectory = type;
+        // console.log(state.uploadEle);
+    });
+};
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const upload_change = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    // console.log('文件状态改变时的钩子', uploadFile, uploadFiles);
+    // // 过滤已上传的文件和重复的文件
+    const results = uploadFiles.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    const new_upload_files = results.filter((item: UploadFile) => {
+        return !form.value.file.find((item2: fileData) => {
+            return item2.file.name === item.name && item2.file.size === item.size;
+        });
+    });
+    // 将过滤后的数组和form.file数组合并
+    new_upload_files.forEach((item: UploadFile) => {
+        // item.status = 'ready';
+        const new_file_obj = {
+            status: '等待上传',
+            progress: 0,
+            file: item.raw as File,
+        };
+        form.value.file.push(new_file_obj);
+    });
+};
+// 上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
+const validExt = (name: string) => props.exts.includes(ext_name(name));
+const validSize = (size: number) => size <= props.fileSize;
+// 上传前的钩子
+const before_upload = (file: any) => {
+    // 检查文件是否为图片
+    if (validExt(file.name) && validSize(file.size)) {
+        console.log('允许上传');
+        return true; // 允许上传
+    } else {
+        console.log('不允许上传');
+        return false; // 不允许上传
+    }
+};
+// 超出限制时的钩子
+const handle_exceed = (files: any, fileList: any) => {
+    ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+};
+// 清空列表
+const clear_list_event = () => {
+    form.value.file = [];
+    file_list.value = [];
+};
+const is_dragging = ref(false);
+// 引用dropzone DOM元素以便在dragLeave中检查
+const dropzone = ref<HTMLElement | null>(null);
+onMounted(() => {
+    dropzone.value = document.getElementById('dropzone') as HTMLElement;
+});
+
+// 拖拽事件 和 列表拖动文件进入触发事件
+const handle_drag_in = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    is_dragging.value = true;
+};
+// 列表拖动文件离开触发事件
+const handle_drag_leave = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // 使用一个变量来跟踪鼠标是否离开了dropzone
+    const leaveTimer = setTimeout(() => {
+        // 确保鼠标不在dropzone或其子元素中
+        if (!document.getElementById('dropzone')?.contains(event.relatedTarget as Node)) {
+            is_dragging.value = false;
+        }
+    }, 50); // 延迟50毫秒
+
+    // 当鼠标重新进入dropzone时，清除定时器
+    event.currentTarget?.addEventListener(
+        'dragenter',
+        () => {
+            clearTimeout(leaveTimer);
+        },
+        { once: true }
+    );
+};
+// 松开拖拽的文件 获取文件信息
+const handle_drop = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    is_dragging.value = false;
+    let results = await Promise.all([...event.dataTransfer.items].map((item) => handle_entry(item.webkitGetAsEntry())));
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    results = results.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        results.forEach((file: any) => {
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    progress: 0,
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+/**
+ * 处理文件/目录并返回一个Promise。
+ * 此函数旨在处理文件/目录，无论是文件还是目录。如果是文件，则直接以文件形式解析并解决Promise。如果是目录，则递归处理目录中的所有文件。
+ * @param {any} entry 文件/目录，可以是文件或目录。
+ * @returns {Promise<any[]>} 返回一个Promise，解析为一个数组，包含所有条目的文件对象。
+ */
+const handle_entry = (entry: any) => {
+    return new Promise((resolve) => {
+        // 如果entry是一个文件
+        if (entry.isFile) {
+            // 直接以文件形式解析Promise
+            entry.file(resolve);
+            return;
+        }
+        // 如果entry是一个目录
+        const dirReader = entry.createReader();
+        dirReader.readEntries(async (entries: any) => {
+            // 递归处理目录中的所有条目，并通过Promise.all等待所有处理完成
+            resolve(await Promise.all(entries.map(handle_entry)));
+        });
+    });
+};
+// 移除文件
+const del_upload = (index: number) => {
+    // 根据下标删除文件
+    form.value.file.splice(index, 1);
+    file_list.value.splice(index, 1);
+};
+// 粘贴上传
+const handle_paste = (event: any) => {
+    console.log(event);
+    // 获取粘贴板中的文件列表
+    const files = event.clipboardData.files;
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    const results = [...files].filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        console.log(results);
+        results.forEach((file: any) => {
+            // 判断是否重复
+            // 如果上传列表中没有与当前文件相同的文件，则添加到上传列表中
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    progress: 0,
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            } else {
+                ElMessageBox.alert(`文件 ${file.name} 已存在!`);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+
+// 执行上传
+const submit_event = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            form.value.file.forEach((item: any) => {
+                const formData = new FormData();
+                formData.append('type', props.type == 'img' ? 'image' : props.type == 'video' ? 'video' : props.type == 'file' ? 'file' : '');
+                formData.append('category_id', form.value.category_id);
+                formData.append('upfile', item.file);
+                if (item.status == '等待上传') {
+                    item.status = '上传中';
+                    // const on_upload_progress = (progressEvent: any) => {
+                    //     item.progress = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2));
+                    //     console.log('1', item.progress);
+                    // };
+                    const config = {
+                        onUploadProgress: (progressEvent: any) => {
+                            item.progress = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2));
+                            console.log('1', item.progress);
+                        },
+                    };
+                    UploadAPI.uploadAttachment(formData, config).then((res) => {
+                        ElMessage.success('上传成功');
+                        item.status = '上传成功';
+                    });
+                }
+            });
+        } else {
+            console.log('error submit!', fields);
+        }
+    });
+};
+
+//#endregion 本地上传 -----------------------------------------------end
+
+//#region 扫码上传 -----------------------------------------------start
+interface scanFile {
+    name: string;
+    url: string;
+    size: number;
+}
+const scan_file_list = ref<scanFile[]>([
+    { name: '1', url: '1', size: 0 },
+    { name: '2', url: '2', size: 0 },
+    { name: '3', url: '3', size: 0 },
+    { name: '4', url: '4', size: 0 },
+    { name: '5', url: '5', size: 0 },
+]);
+// 删除已上传的文件
+const del_already_upload = (index: number) => {
+    // 根据下标删除文件
+    scan_file_list.value.splice(index, 1);
+    // 调接口真实删除
+};
+//#endregion 扫码上传 -----------------------------------------------end
+
+//#region 网络上传 -----------------------------------------------start
+// 提取图片
+const extract_images = () => {
+    // 此处调用接口获取提取后的图片更新输入框的地址，改为在线地址
+    ElMessage({
+        type: 'success',
+        message: '提取成功!',
+    });
+};
+const emit = defineEmits(['close']);
+// 关闭所有弹窗
+const close_all_dialog = () => {
+    const new_form = JSON.parse(JSON.stringify(form.value));
+    emit('close', new_form);
+    close_dialog();
+};
+//#endregion 网络上传 -----------------------------------------------end
+
+// file转换成base64
+const file_to_base64 = (file: any) => {
+    return URL.createObjectURL(file);
+};
+// 关闭弹窗
+const close_dialog = () => {
+    dialogVisible.value = false;
+    form.value = {
+        type: 'loc',
+        category_id: '',
+        file: [],
+        qrcode: '',
+        web_image: '',
+    };
+    scan_file_list.value = [];
+    // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+    if (timer.value !== null) {
+        clearTimeout(timer.value);
+    }
+    timer.value = null; // 清除引用，防止内存泄漏
+};
+</script>
+<style lang="scss" scoped>
+.upload-content {
+    height: 57.4rem;
+    gap: 4.5rem;
+    .table {
+        width: 100%;
+        height: 30rem;
+        .table-header,
+        .table-body {
+            .table-row {
+                display: flex;
+                width: 100%;
+                border-bottom: 0.1rem solid #eee;
+                color: #999;
+                font-size: 1.4rem;
+                .table-cell {
+                    flex: 1;
+                    padding: 1rem;
+                    color: #666;
+                    display: flex;
+                    align-items: center;
+                    word-break: break-all;
+                    gap: 1rem;
+                    .preview-img {
+                        width: 2.8rem;
+                        height: 2.8rem;
+                    }
+                    .desc {
+                        flex: 1;
+                        width: 0;
+                    }
+                }
+                .table-cell-oprate {
+                    padding: 1rem;
+                    width: 5rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    word-break: break-all;
+                }
+            }
+        }
+        .table-body {
+            .table-cell,
+            .table-cell-oprate {
+                padding: 1.5rem 1rem !important;
+            }
+            .table-cell-oprate {
+                color: $cr-primary;
+            }
+        }
+        .folder-upload {
+            background: #fafcff;
+            border-radius: 0.2rem;
+            border: 0.1rem dashed #afdafa;
+            height: 32rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            .active {
+                background-color: #eef5ff;
+                border-color: #35a9ff;
+            }
+        }
+    }
+    .form-item-width {
+        width: 33.5rem !important;
+    }
+}
+</style>
diff --git a/src/components/common/upload/upload-model copy.vue b/src/components/common/upload/upload-model copy.vue
new file mode 100644
index 00000000..83e49d74
--- /dev/null
+++ b/src/components/common/upload/upload-model copy.vue	
@@ -0,0 +1,588 @@
+<!-- 上传组件 -->
+<template>
+    <el-dialog v-model="dialogVisible" class="radius-lg" width="1168" append-to-body>
+        <template #header>
+            <div class="title center re">
+                <div class="tc size-16 fw">{{ upload_type_name }}上传</div>
+            </div>
+        </template>
+        <div class="upload-content pa-20" @paste="handle_paste">
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="85" status-icon>
+                <el-form-item label="上传方式">
+                    <el-radio-group v-model="form.type" @change="upload_type_change">
+                        <el-radio value="loc">本地上传</el-radio>
+                        <el-radio value="scan">扫码上传</el-radio>
+                        <el-radio v-if="upload_type !== 'file'" value="web">网络上传</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上传至分组" prop="category_id">
+                    <div class="form-item-width">
+                        <el-cascader v-model="form.category_id" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="category_id_change"></el-cascader>
+                    </div>
+                </el-form-item>
+                <template v-if="form.type == 'loc'">
+                    <div class="flex-row jc-sb align-c mt-30">
+                        <div class="flex-row">
+                            <!-- base_url + 'diyapi/attachmentupload?token=b84c6cac0dacd1bc624393cd522dec37' -->
+                            <el-upload ref="fileUpload1" v-model:file-list="file_list" multiple action="#" :accept="exts_text" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed" :on-progress="handle_progress" :http-request="handle_request">
+                                <template #trigger>
+                                    <el-button @click="folder_mode(false)"> 上传{{ upload_type_name }} </el-button>
+                                    <el-button @click="folder_mode(true)"> 上传文件夹 </el-button>
+                                </template>
+                            </el-upload>
+                        </div>
+                        <el-button @click="clear_list_event">清空列表</el-button>
+                    </div>
+                    <div class="table mt-10">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell">上传状态</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <div id="dropzone" @dragover.prevent="handle_drag_in" @dragenter="handle_drag_in" @dragleave="handle_drag_leave" @drop.prevent="handle_drop">
+                            <el-scrollbar v-if="!is_dragging && form.file.length > 0" height="341px">
+                                <div class="table-body">
+                                    <div v-for="(item, index) in form.file" :key="item.file.name + item.file.size" class="table-row">
+                                        <div class="table-cell">
+                                            <el-image :src="file_to_base64(item.file)" class="preview-img radius-sm" fit="contain">
+                                                <template #error>
+                                                    <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                        <icon name="error-img" size="12"></icon>
+                                                    </div>
+                                                </template>
+                                            </el-image>
+                                            <div class="desc">{{ item.file.name }}</div>
+                                        </div>
+                                        <div class="table-cell">{{ annex_size_to_unit(item.file.size) }}</div>
+                                        <div class="table-cell">{{ item.status }}</div>
+                                        <div class="table-cell-oprate" @click="del_upload(index)">移除</div>
+                                    </div>
+                                </div>
+                            </el-scrollbar>
+                            <div v-show="is_dragging || form.file.length < 1" class="folder-upload mt-20" :class="is_dragging ? 'active' : ''">
+                                <el-upload ref="fileUpload2" v-model:file-list="file_list" :accept="exts_text" multiple action="#" :auto-upload="false" :show-file-list="false" :on-change="upload_change" :before-upload="before_upload" :limit="limit" :on-exceed="handle_exceed">
+                                    <div class="flex-col jc-c align-c">
+                                        <icon name="add" size="60" color="#dbeef6"></icon>
+                                        <p class="size-18 cr-c fw">请将需要上传的文件/文件夹拖到此处或粘贴</p>
+                                    </div>
+                                </el-upload>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'scan'">
+                    <el-form-item label="二维码" class="mb-10">
+                        <qrcode :src="form.qrcode" :is-mask="is_mask"></qrcode>
+                    </el-form-item>
+                    <div class="table">
+                        <div class="table-header">
+                            <div class="table-row">
+                                <div class="table-cell">文件名</div>
+                                <div class="table-cell">文件大小</div>
+                                <div class="table-cell-oprate">操作</div>
+                            </div>
+                        </div>
+                        <el-scrollbar height="224px">
+                            <div class="table-body">
+                                <div v-for="(item, index) in scan_file_list" :key="item.name + item.size" class="table-row">
+                                    <div class="table-cell">
+                                        <el-image :src="item.url" class="preview-img radius-sm" fit="contain">
+                                            <template #error>
+                                                <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                    <icon name="error-img" size="12"></icon>
+                                                </div>
+                                            </template>
+                                        </el-image>
+                                        <div class="desc">{{ item.name }}</div>
+                                    </div>
+                                    <div class="table-cell">{{ annex_size_to_unit(item.size) }}</div>
+                                    <div class="table-cell-oprate" @click="del_already_upload(index)">删除</div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </template>
+                <template v-else-if="form.type == 'web'">
+                    <el-form-item label="网络图片">
+                        <div class="flex-row align-c gap-10">
+                            <el-input v-model="form.web_image" class="form-item-width" placeholder="请输入网络图片地址" />
+                            <div class="c-pointer cr-primary size-12" @click="extract_images">提取图片</div>
+                        </div>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button class="plr-28 ptb-10" @click="close_dialog">取消</el-button>
+                <el-button v-if="form.type == 'loc'" class="plr-28 ptb-10" type="primary" @click="submit_event(ruleFormRef)">上传</el-button>
+                <el-button v-else-if="form.type == 'scan'" class="plr-28 ptb-10" type="primary" @click="close_dialog">返回图库</el-button>
+                <el-button v-else-if="form.type == 'web'" class="plr-28 ptb-10" type="primary" @click="close_all_dialog">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import UploadAPI, { Tree } from '@/api/upload';
+import { uploadrStore } from '@/store';
+const upload_store = uploadrStore();
+import type { UploadFile, UploadFiles, UploadUserFile, FormRules, FormInstance, UploadInstance, UploadProgressEvent, UploadRequestOptions, UploadRequestHandler } from 'element-plus';
+import { annex_size_to_unit, ext_name } from '@/utils';
+/**
+ * @description: 图片执行上传弹窗
+ * @param close{String} 默认值
+ * @return {*} close
+ */
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'img', // img/video/file
+    },
+    limit: {
+        type: Number,
+        default: 10000,
+    },
+    exts: {
+        type: Array,
+        default: () => ['.png', '.jpg', '.jpeg', '.bmp', '.webp', '.gif'],
+    },
+    fileSize: {
+        type: Number,
+        default: 1024 * 1024 * 1024,
+    },
+});
+const dialogVisible = defineModel({ type: Boolean, default: false });
+// 上传类型
+const upload_type = ref(props.type);
+// 上传类型转换成name
+const upload_type_name = computed(() => {
+    return upload_type.value === 'img' ? '图片' : upload_type.value === 'video' ? '视频' : '文件';
+});
+// 格式限制
+const exts_text = ref(props.exts.join(','));
+const fileUpload1 = ref<UploadInstance>();
+const fileUpload2 = ref<UploadInstance>();
+const base_url = import.meta.env.VITE_APP_BASE_API;
+const file_list = ref<UploadUserFile[]>([]);
+interface fileData {
+    file: File;
+    status: string;
+}
+interface formData {
+    type: string;
+    category_id: string;
+    file: fileData[];
+    qrcode: string;
+    web_image: string;
+}
+const ruleFormRef = ref<FormInstance>();
+const form = ref<formData>({
+    type: 'loc',
+    category_id: '',
+    file: [],
+    qrcode: '11223344',
+    web_image: '',
+});
+const rules = reactive<FormRules>({
+    category_id: [{ required: true, trigger: 'change', message: '请选择分组' }],
+});
+// 是否给二维码加模糊效果
+const is_mask = ref(true);
+const timer = ref<number | null>(null);
+// 上传方式
+const upload_type_change = (type: any) => {
+    // 清除之前的定时器（如果存在）
+    if (timer.value) {
+        // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+        clearTimeout(timer.value);
+        timer.value = null; // 清除引用，防止内存泄漏
+    }
+    // 如果需要设置新的定时器
+    if (type === 'scan') {
+        timer.value = setInterval(() => {
+            console.log('timer-----定时调用');
+            // 此处写定时调用接口，获取文件列表
+        }, 3000);
+    }
+};
+// 选择分组
+const category_id_change = (val: any) => {
+    console.log(val);
+    if (val && val.length > 0) {
+        is_mask.value = false;
+    }
+};
+
+// 使用计算属性获取级联数据 // 图片/视频/文件移动至
+const cascader_data = computed(() => {
+    return upload_store.category.map((tree: Tree) => ({
+        value: tree.id,
+        label: tree.name,
+        children: tree.items?.map((item: Tree) => ({
+            value: item.id,
+            label: item.name,
+        })),
+    }));
+});
+
+//#region 本地上传 -----------------------------------------------start
+
+// 选择文件夹
+const state = reactive({
+    uploadEle: null as HTMLInputElement | null,
+    uploadList: [],
+});
+const folder_mode = (type: boolean) => {
+    if (!state.uploadEle) {
+        state.uploadEle = document.querySelector('.el-upload__input') as HTMLInputElement;
+    }
+    nextTick(() => {
+        (state.uploadEle as HTMLInputElement).webkitdirectory = type;
+        // console.log(state.uploadEle);
+    });
+};
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const upload_change = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    // console.log('文件状态改变时的钩子', uploadFile, uploadFiles);
+    // // 过滤已上传的文件和重复的文件
+    const results = uploadFiles.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    const new_upload_files = results.filter((item: UploadFile) => {
+        return !form.value.file.find((item2: fileData) => {
+            return item2.file.name === item.name && item2.file.size === item.size;
+        });
+    });
+    // 将过滤后的数组和form.file数组合并
+    new_upload_files.forEach((item: UploadFile) => {
+        // item.status = 'ready';
+        const new_file_obj = {
+            status: '等待上传',
+            file: item.raw as File,
+        };
+        form.value.file.push(new_file_obj);
+    });
+};
+// 上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
+const validExt = (name: string) => props.exts.includes(ext_name(name));
+const validSize = (size: number) => size <= props.fileSize;
+// 上传前的钩子
+const before_upload = (file: any) => {
+    // 检查文件是否为图片
+    if (validExt(file.name) && validSize(file.size)) {
+        console.log('允许上传');
+        return true; // 允许上传
+    } else {
+        console.log('不允许上传');
+        return false; // 不允许上传
+    }
+};
+// 超出限制时的钩子
+const handle_exceed = (files: any, fileList: any) => {
+    ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+};
+const handle_progress = (event: UploadProgressEvent) => {
+    console.log(event.percent);
+};
+// 上传中
+const handle_request = (options: UploadRequestOptions): Promise<any> => {
+    let formdata = new FormData();
+    console.log(options);
+    formdata.append('upfile', options.file);
+    formdata.append('type', props.type == 'img' ? 'image' : props.type == 'video' ? 'video' : props.type == 'file' ? 'file' : '');
+    formdata.append('category_id', form.value.category_id);
+    form.value.file.forEach((item: any) => {
+        formdata.append('upfile', item.file);
+        item.status = '上传中';
+    });
+    let number = 0;
+    return UploadAPI.uploadAttachment(formdata, number).then((res) => {
+        ElMessage.success('上传成功');
+        form.value.file.forEach((item: any) => {
+            item.status = '上传完成';
+        });
+    });
+};
+// 清空列表
+const clear_list_event = () => {
+    form.value.file = [];
+    file_list.value = [];
+};
+const is_dragging = ref(false);
+// 引用dropzone DOM元素以便在dragLeave中检查
+const dropzone = ref<HTMLElement | null>(null);
+onMounted(() => {
+    dropzone.value = document.getElementById('dropzone') as HTMLElement;
+});
+
+// 拖拽事件 和 列表拖动文件进入触发事件
+const handle_drag_in = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    is_dragging.value = true;
+};
+// 列表拖动文件离开触发事件
+const handle_drag_leave = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // 使用一个变量来跟踪鼠标是否离开了dropzone
+    const leaveTimer = setTimeout(() => {
+        // 确保鼠标不在dropzone或其子元素中
+        if (!document.getElementById('dropzone')?.contains(event.relatedTarget as Node)) {
+            is_dragging.value = false;
+        }
+    }, 50); // 延迟50毫秒
+
+    // 当鼠标重新进入dropzone时，清除定时器
+    event.currentTarget?.addEventListener(
+        'dragenter',
+        () => {
+            clearTimeout(leaveTimer);
+        },
+        { once: true }
+    );
+};
+// 松开拖拽的文件 获取文件信息
+const handle_drop = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    is_dragging.value = false;
+    let results = await Promise.all([...event.dataTransfer.items].map((item) => handle_entry(item.webkitGetAsEntry())));
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    results = results.flat(Infinity).filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        results.forEach((file: any) => {
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+/**
+ * 处理文件/目录并返回一个Promise。
+ * 此函数旨在处理文件/目录，无论是文件还是目录。如果是文件，则直接以文件形式解析并解决Promise。如果是目录，则递归处理目录中的所有文件。
+ * @param {any} entry 文件/目录，可以是文件或目录。
+ * @returns {Promise<any[]>} 返回一个Promise，解析为一个数组，包含所有条目的文件对象。
+ */
+const handle_entry = (entry: any) => {
+    return new Promise((resolve) => {
+        // 如果entry是一个文件
+        if (entry.isFile) {
+            // 直接以文件形式解析Promise
+            entry.file(resolve);
+            return;
+        }
+        // 如果entry是一个目录
+        const dirReader = entry.createReader();
+        dirReader.readEntries(async (entries: any) => {
+            // 递归处理目录中的所有条目，并通过Promise.all等待所有处理完成
+            resolve(await Promise.all(entries.map(handle_entry)));
+        });
+    });
+};
+// 移除文件
+const del_upload = (index: number) => {
+    // 根据下标删除文件
+    form.value.file.splice(index, 1);
+    file_list.value.splice(index, 1);
+};
+// 粘贴上传
+const handle_paste = (event: any) => {
+    console.log(event);
+    // 获取粘贴板中的文件列表
+    const files = event.clipboardData.files;
+    // 过滤符合条件的数据   文件后缀名，文件大小过滤
+    const results = [...files].filter((f: any) => validExt(f.name) && validSize(f.size));
+    // 遍历过滤后的数据，过滤重复数据后并添加到上传列表中
+    if (results.length + form.value.file.length <= props.limit) {
+        console.log(results);
+        results.forEach((file: any) => {
+            // 判断是否重复
+            // 如果上传列表中没有与当前文件相同的文件，则添加到上传列表中
+            if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
+                const new_file_obj = {
+                    status: '等待上传',
+                    file: file,
+                };
+                const new_file_obj_upload = {
+                    name: file.name,
+                    url: 'xxx',
+                    file: file,
+                };
+                form.value.file.push(new_file_obj);
+                file_list.value.push(new_file_obj_upload);
+            } else {
+                ElMessageBox.alert(`文件 ${file.name} 已存在!`);
+            }
+        });
+    } else {
+        ElMessageBox.alert(`最多上传 ${props.limit} 个文件!`);
+    }
+};
+
+// 执行上传
+const submit_event = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            fileUpload1.value?.submit();
+        } else {
+            console.log('error submit!', fields);
+        }
+    });
+};
+// 进度条
+const onProgress = (p: number) => {
+    console.log(p);
+    ElMessage.success(`上传进度：${p}%`);
+};
+
+//#endregion 本地上传 -----------------------------------------------end
+
+//#region 扫码上传 -----------------------------------------------start
+interface scanFile {
+    name: string;
+    url: string;
+    size: number;
+}
+const scan_file_list = ref<scanFile[]>([
+    { name: '1', url: '1', size: 0 },
+    { name: '2', url: '2', size: 0 },
+    { name: '3', url: '3', size: 0 },
+    { name: '4', url: '4', size: 0 },
+    { name: '5', url: '5', size: 0 },
+]);
+// 删除已上传的文件
+const del_already_upload = (index: number) => {
+    // 根据下标删除文件
+    scan_file_list.value.splice(index, 1);
+    // 调接口真实删除
+};
+//#endregion 扫码上传 -----------------------------------------------end
+
+//#region 网络上传 -----------------------------------------------start
+// 提取图片
+const extract_images = () => {
+    // 此处调用接口获取提取后的图片更新输入框的地址，改为在线地址
+    ElMessage({
+        type: 'success',
+        message: '提取成功!',
+    });
+};
+const emit = defineEmits(['close']);
+// 关闭所有弹窗
+const close_all_dialog = () => {
+    const new_form = JSON.parse(JSON.stringify(form.value));
+    emit('close', new_form);
+    close_dialog();
+};
+//#endregion 网络上传 -----------------------------------------------end
+
+// file转换成base64
+const file_to_base64 = (file: any) => {
+    return URL.createObjectURL(file);
+};
+// 关闭弹窗
+const close_dialog = () => {
+    dialogVisible.value = false;
+    form.value = {
+        type: 'loc',
+        category_id: '',
+        file: [],
+        qrcode: '',
+        web_image: '',
+    };
+    scan_file_list.value = [];
+    // 直接检查 timer.value 是否存在（不是 null 或 undefined）
+    if (timer.value !== null) {
+        clearTimeout(timer.value);
+    }
+    timer.value = null; // 清除引用，防止内存泄漏
+};
+</script>
+<style lang="scss" scoped>
+.upload-content {
+    height: 57.4rem;
+    gap: 4.5rem;
+    .table {
+        width: 100%;
+        height: 30rem;
+        .table-header,
+        .table-body {
+            .table-row {
+                display: flex;
+                width: 100%;
+                border-bottom: 0.1rem solid #eee;
+                color: #999;
+                font-size: 1.4rem;
+                .table-cell {
+                    flex: 1;
+                    padding: 1rem;
+                    color: #666;
+                    display: flex;
+                    align-items: center;
+                    word-break: break-all;
+                    gap: 1rem;
+                    .preview-img {
+                        width: 2.8rem;
+                        height: 2.8rem;
+                    }
+                    .desc {
+                        flex: 1;
+                        width: 0;
+                    }
+                }
+                .table-cell-oprate {
+                    padding: 1rem;
+                    width: 5rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    word-break: break-all;
+                }
+            }
+        }
+        .table-body {
+            .table-cell,
+            .table-cell-oprate {
+                padding: 1.5rem 1rem !important;
+            }
+            .table-cell-oprate {
+                color: $cr-primary;
+            }
+        }
+        .folder-upload {
+            background: #fafcff;
+            border-radius: 0.2rem;
+            border: 0.1rem dashed #afdafa;
+            height: 32rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            .active {
+                background-color: #eef5ff;
+                border-color: #35a9ff;
+            }
+        }
+    }
+    .form-item-width {
+        width: 33.5rem !important;
+    }
+}
+</style>
diff --git a/src/components/common/upload/upload-model.vue b/src/components/common/upload/upload-model.vue
index 720df317..7e1a563e 100644
--- a/src/components/common/upload/upload-model.vue
+++ b/src/components/common/upload/upload-model.vue
@@ -7,7 +7,8 @@
             </div>
         </template>
         <div class="upload-content pa-20" @paste="handle_paste">
-            <el-form :model="form" label-width="75">
+            {{ exts }}
+            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="85" status-icon>
                 <el-form-item label="上传方式">
                     <el-radio-group v-model="form.type" @change="upload_type_change">
                         <el-radio value="loc">本地上传</el-radio>
@@ -15,9 +16,9 @@
                         <el-radio v-if="upload_type !== 'file'" value="web">网络上传</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item label="上传至分组" prop="group">
+                <el-form-item label="上传至分组" prop="category_id">
                     <div class="form-item-width">
-                        <el-cascader v-model="form.group" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="group_change"></el-cascader>
+                        <el-cascader v-model="form.category_id" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="category_id_change"></el-cascader>
                     </div>
                 </el-form-item>
                 <template v-if="form.type == 'loc'">
@@ -44,20 +45,23 @@
                         <div id="dropzone" @dragover.prevent="handle_drag_in" @dragenter="handle_drag_in" @dragleave="handle_drag_leave" @drop.prevent="handle_drop">
                             <el-scrollbar v-if="!is_dragging && form.file.length > 0" height="341px">
                                 <div class="table-body">
-                                    <div v-for="(item, index) in form.file" :key="item.file.name + item.file.size" class="table-row">
-                                        <div class="table-cell">
-                                            <el-image :src="file_to_base64(item.file)" class="preview-img radius-sm" fit="contain">
-                                                <template #error>
-                                                    <div class="bg-f5 img flex-row jc-c align-c radius h w">
-                                                        <icon name="error-img" size="12"></icon>
-                                                    </div>
-                                                </template>
-                                            </el-image>
-                                            <div class="desc">{{ item.file.name }}</div>
+                                    <div v-for="(item, index) in form.file" :key="item.file.name + item.file.size" class="re">
+                                        <div class="progress" :style="'width:' + item.progress + '%'"></div>
+                                        <div class="table-row">
+                                            <div class="table-cell">
+                                                <el-image :src="file_to_base64(item.file)" class="preview-img radius-sm" fit="contain">
+                                                    <template #error>
+                                                        <div class="bg-f5 img flex-row jc-c align-c radius h w">
+                                                            <icon name="error-img" size="12"></icon>
+                                                        </div>
+                                                    </template>
+                                                </el-image>
+                                                <div class="desc">{{ item.file.name }}</div>
+                                            </div>
+                                            <div class="table-cell">{{ annex_size_to_unit(item.file.size) }}</div>
+                                            <div class="table-cell">{{ item.status }}{{ item.progress + '%' }}</div>
+                                            <div class="table-cell-oprate" @click="del_upload(index)">移除</div>
                                         </div>
-                                        <div class="table-cell">{{ annex_size_to_unit(item.file.size) }}</div>
-                                        <div class="table-cell">{{ item.status }}</div>
-                                        <div class="table-cell-oprate" @click="del_upload(index)">移除</div>
                                     </div>
                                 </div>
                             </el-scrollbar>
@@ -117,7 +121,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button class="plr-28 ptb-10" @click="close_dialog">取消</el-button>
-                <el-button v-if="form.type == 'loc'" class="plr-28 ptb-10" type="primary" @click="submit">上传</el-button>
+                <el-button v-if="form.type == 'loc'" class="plr-28 ptb-10" type="primary" @click="submit_event(ruleFormRef)">上传</el-button>
                 <el-button v-else-if="form.type == 'scan'" class="plr-28 ptb-10" type="primary" @click="close_dialog">返回图库</el-button>
                 <el-button v-else-if="form.type == 'web'" class="plr-28 ptb-10" type="primary" @click="close_all_dialog">确认</el-button>
             </span>
@@ -128,7 +132,7 @@
 import UploadAPI, { Tree } from '@/api/upload';
 import { uploadrStore } from '@/store';
 const upload_store = uploadrStore();
-import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus';
+import type { UploadFile, UploadFiles, UploadUserFile, FormRules, FormInstance } from 'element-plus';
 import { annex_size_to_unit, ext_name } from '@/utils';
 /**
  * @description: 图片执行上传弹窗
@@ -150,7 +154,7 @@ const props = defineProps({
     },
     fileSize: {
         type: Number,
-        default: 1024 * 1024,
+        default: 1024 * 1024 * 1024,
     },
 });
 const dialogVisible = defineModel({ type: Boolean, default: false });
@@ -166,21 +170,26 @@ const file_list = ref<UploadUserFile[]>([]);
 interface fileData {
     file: File;
     status: string;
+    progress: number;
 }
 interface formData {
     type: string;
-    group: string;
+    category_id: string;
     file: fileData[];
     qrcode: string;
     web_image: string;
 }
+const ruleFormRef = ref<FormInstance>();
 const form = ref<formData>({
     type: 'loc',
-    group: '',
+    category_id: '',
     file: [],
     qrcode: '11223344',
     web_image: '',
 });
+const rules = reactive<FormRules>({
+    category_id: [{ required: true, trigger: 'change', message: '请选择分组' }],
+});
 // 是否给二维码加模糊效果
 const is_mask = ref(true);
 const timer = ref<number | null>(null);
@@ -201,7 +210,8 @@ const upload_type_change = (type: any) => {
     }
 };
 // 选择分组
-const group_change = (val: any) => {
+const category_id_change = (val: any) => {
+    console.log(val);
     if (val && val.length > 0) {
         is_mask.value = false;
     }
@@ -250,6 +260,7 @@ const upload_change = async (uploadFile: UploadFile, uploadFiles: UploadFiles) =
         // item.status = 'ready';
         const new_file_obj = {
             status: '等待上传',
+            progress: 0,
             file: item.raw as File,
         };
         form.value.file.push(new_file_obj);
@@ -326,6 +337,7 @@ const handle_drop = async (event: any) => {
             if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
                 const new_file_obj = {
                     status: '等待上传',
+                    progress: 0,
                     file: file,
                 };
                 const new_file_obj_upload = {
@@ -385,6 +397,7 @@ const handle_paste = (event: any) => {
             if (!form.value.file.some((item: any) => item.file.name === file.name && item.file.size === file.size)) {
                 const new_file_obj = {
                     status: '等待上传',
+                    progress: 0,
                     file: file,
                 };
                 const new_file_obj_upload = {
@@ -404,7 +417,34 @@ const handle_paste = (event: any) => {
 };
 
 // 执行上传
-const submit = () => {};
+const submit_event = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            form.value.file.forEach((item: any) => {
+                const formData = new FormData();
+                formData.append('type', props.type == 'img' ? 'image' : props.type == 'video' ? 'video' : props.type == 'file' ? 'file' : '');
+                formData.append('category_id', form.value.category_id);
+                formData.append('upfile', item.file);
+                if (item.status == '等待上传') {
+                    item.status = '上传中';
+                    const on_upload_progress = (progressEvent: any) => {
+                        console.log('progressEvent', progressEvent);
+                        item.progress = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(2));
+                        console.log('1', item.progress);
+                    };
+                    UploadAPI.uploadAttachment(formData, on_upload_progress).then((res) => {
+                        ElMessage.success('上传成功');
+                        item.status = '上传成功';
+                    });
+                }
+            });
+        } else {
+            console.log('error submit!', fields);
+        }
+    });
+};
+
 //#endregion 本地上传 -----------------------------------------------end
 
 //#region 扫码上传 -----------------------------------------------start
@@ -455,7 +495,7 @@ const close_dialog = () => {
     dialogVisible.value = false;
     form.value = {
         type: 'loc',
-        group: '',
+        category_id: '',
         file: [],
         qrcode: '',
         web_image: '',
@@ -477,7 +517,17 @@ const close_dialog = () => {
         height: 30rem;
         .table-header,
         .table-body {
+            .progress {
+                position: absolute;
+                inset: 0;
+                width: 0;
+                height: 100%;
+                background: #f3f9ff;
+                transition: width 0.5s linear;
+            }
             .table-row {
+                position: relative;
+                z-index: 1;
                 display: flex;
                 width: 100%;
                 border-bottom: 0.1rem solid #eee;
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index caee56c0..0972c35d 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -23,7 +23,7 @@
                                 </el-tooltip>
                             </el-radio-group>
                         </div>
-                        <upload v-model="form.background_img_url" :limit="1"></upload>
+                        <upload v-model="form.background_img_url" type="file" :limit="1"></upload>
                     </div>
                 </el-form-item>
             </card-container>
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 05027dc8..ee095fd0 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -28,7 +28,7 @@
                 <!-- 页面设置 -->
                 <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                 <!-- 拖拽区 -->
-                <div class="model-drag" ref="scrollTop">
+                <div ref="scrollTop" class="model-drag">
                     <div class="seat" style="background: #fff"></div>
                     <div class="model-wall" :style="content_style">
                         <div :style="'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
@@ -182,13 +182,11 @@ watch(
         page_settings();
     }
 );
-
 watchEffect(() => {
-    const content =  props.header.com_data?.content || {};
+    const content = props.header.com_data?.content || {};
     const container_common_styles = gradient_computer(content) + background_computer(content);
-
     content_style.value = container_common_styles;
-})
+});
 watch(
     () => props.footer,
     (newValue) => {
@@ -452,7 +450,7 @@ const activeCard = ref<HTMLElement | null>(null);
 const scroll = () => {
     nextTick(() => {
         // 获取当前选中的内容
-        activeCard.value = document.querySelector(".plug-in-table.plug-in-border");
+        activeCard.value = document.querySelector('.plug-in-table.plug-in-border');
         if (activeCard.value) {
             // 获取选中内容的位置
             const scrollY = activeCard.value.offsetTop;
@@ -480,7 +478,7 @@ const page_settings = () => {
             item.show_tabs = false;
         });
     }
-    
+
     emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
 };
 //导出
diff --git a/src/utils/request.ts b/src/utils/request.ts
index a4a42590..1ed78d60 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -12,7 +12,7 @@ service.interceptors.request.use(
     (config: InternalAxiosRequestConfig) => {
         // const userStore = useUserStoreHook();
         // const accessToken = localStorage.getItem(TOKEN_KEY);
-        const accessToken = { token: '100a1e5ba70b3920a919f85ac10b7bb6' };
+        const accessToken = { token: 'b84c6cac0dacd1bc624393cd522dec37' };
         if (accessToken.token) {
             // config.headers.Authorization = accessToken.token;
             // config.data = { ...config.data, token: accessToken.token };