@ebiz/designer-components 0.0.18-beta.1

package/src/components/TdesignUpload.vue

@@ -0,0 +1,789 @@
+<template>
+    <t-upload
+        :accept="accept"
+        :action="internalAction"
+        :allowUploadDuplicateFile="allowUploadDuplicateFile"
+        :autoUpload="autoUpload"
+        :beforeUpload="handleBeforeUpload"
+        :data="data"
+        :disabled="disabled"
+        :draggable="draggable"
+        :fileListDisplay="fileListDisplay"
+        :files="internalFiles"
+        :format="format"
+        :formatRequest="formatRequest"
+        :headers="headers"
+        :isBatchUpload="isBatchUpload"
+        :max="max"
+        :method="method"
+        :multiple="multiple"
+        :name="name"
+        :placeholder="placeholder"
+        :requestMethod="useInternalUpload ? customRequestMethod : requestMethod"
+        :showUploadProgress="showUploadProgress"
+        :sizeLimit="sizeLimit"
+        :status="status"
+        :theme="theme"
+        :tips="tips"
+        :uploadAllFilesInOneRequest="uploadAllFilesInOneRequest"
+        :uploadButton="uploadButton"
+        :useMockProgress="useMockProgress"
+        :withCredentials="withCredentials"
+        v-model="modelValue"
+        @change="handleChange"
+        @click="handleClick"
+        @drag="handleDrag"
+        @drop="handleDrop"
+        @fail="handleFail"
+        @preview="handlePreview"
+        @progress="handleProgress"
+        @remove="handleRemove"
+        @select-change="handleSelectChange"
+        @success="handleSuccess"
+        @validate="handleValidate"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文件列表项插槽 -->
+        <template v-if="$slots.fileListDisplay" #fileListDisplay="slotProps">
+            <slot name="fileListDisplay" v-bind="slotProps"></slot>
+        </template>
+
+        <!-- 替换上传按钮插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot name="default"></slot>
+        </template>
+
+        <!-- 单文件已上传内容插槽 -->
+        <template v-if="$slots.content" #content="slotProps">
+            <slot name="content" v-bind="slotProps"></slot>
+        </template>
+
+        <!-- 文件拖拽区域内容插槽 -->
+        <template v-if="$slots.dragContent" #dragContent>
+            <slot name="dragContent"></slot>
+        </template>
+
+        <!-- 上传按钮内容插槽 -->
+        <template v-if="$slots.trigger" #trigger>
+            <slot name="trigger"></slot>
+        </template>
+
+        <!-- 上传提示文本插槽 -->
+        <template v-if="$slots.tips" #tips>
+            <slot name="tips"></slot>
+        </template>
+    </t-upload>
+</template>
+
+<script>
+export default {
+    name: "EbizUpload"
+}
+</script>
+
+<script setup>
+import { computed, defineProps, defineEmits, ref, onMounted, watch } from 'vue';
+import { Upload as TUpload } from 'tdesign-vue-next';
+import dataService from '../apiService/simpleDataService';
+
+// 内部上传地址常量
+const INTERNAL_UPLOAD_URL = '/file/upload';
+
+// 内部维护的文件列表，代替直接使用props.files
+const internalFiles = ref([]);
+
+// 初始化内部文件列表
+const initializeFiles = () => {
+    // 如果提供了files，使用它初始化
+    if (props.files && Array.isArray(props.files)) {
+        internalFiles.value = [...props.files];
+    }
+};
+
+// 默认的格式化响应函数
+const defaultFormatResponse = (res) => {
+    console.log('Default formatResponse handling:', res);
+    
+    // 处理不同的响应格式
+    if (res === null || res === undefined) {
+        return { url: '', error: '上传失败：未收到服务器响应' };
+    }
+    
+    // 如果res已经是字符串（文件路径），直接使用
+    if (typeof res === 'string') {
+        return { url: res };
+    }
+    
+    // 如果返回的就是服务器的原始响应 { code: 0, msg: '上传成功', data: '文件路径' }
+    // axios拦截器应该已经提取了data部分，但我们做个双重检查
+    if (res.code === 0 && res.data) {
+        return { url: typeof res.data === 'string' ? res.data : '' };
+    }
+    
+    // 如果是自定义对象，可能已经处理过
+    if (res.url) {
+        return { url: res.url };
+    }
+    
+    // 直接处理服务器响应的标准格式
+    if (typeof res === 'string') {
+        // 直接是文件路径字符串
+        return { url: res };
+    }
+    
+    // 如果服务器直接响应了数据，没有包装
+    if (res && !res.code && !res.data && typeof res === 'object') {
+        // 尝试找到可能的URL字段
+        if (res.url || res.path || res.filePath || res.fileUrl) {
+            return { url: res.url || res.path || res.filePath || res.fileUrl };
+        }
+    }
+    
+    // 处理其他可能的情况
+    console.warn('Unknown response format:', res);
+    
+    // 无法识别的格式，返回空URL
+    return { url: '' };
+};
+
+const props = defineProps({
+    // v-model值，已上传和待上传的文件列表
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    // 接受上传的文件类型，同input标签的accept属性
+    accept: {
+        type: String,
+        default: undefined
+    },
+    // 上传的接口地址，可选，如不提供则使用内部dataService上传
+    action: {
+        type: String,
+        default: ''
+    },
+    // 是否允许重复上传相同名称的文件
+    allowUploadDuplicateFile: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在选择文件后自动上传
+    autoUpload: {
+        type: Boolean,
+        default: true
+    },
+    // 上传文件之前的钩子，返回值决定是否上传
+    beforeUpload: {
+        type: Function,
+        default: undefined
+    },
+    // 上传请求时附带的自定义数据
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用拖拽上传
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 文件列表的展示方式
+    fileListDisplay: {
+        type: Function,
+        default: undefined
+    },
+    // 已上传的文件列表，用于初始化内部文件列表
+    files: {
+        type: Array,
+        default: () => []
+    },
+    // 文件上传前转换文件的函数
+    format: {
+        type: Function,
+        default: undefined
+    },
+    // 用于格式化上传请求，可以处理请求参数等
+    formatRequest: {
+        type: Function,
+        default: undefined
+    },
+    // 上传请求的请求头
+    headers: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否批量上传
+    isBatchUpload: {
+        type: Boolean,
+        default: false
+    },
+    // 用于控制文件上传数量
+    max: {
+        type: Number,
+        default: 0
+    },
+    // 上传请求的HTTP方法
+    method: {
+        type: String,
+        default: 'POST',
+        validator: (val) => ['POST', 'GET', 'PUT', 'OPTIONS', 'PATCH', 'post', 'get', 'put', 'options', 'patch'].includes(val)
+    },
+    // 是否支持多文件上传
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    // 上传字段名
+    name: {
+        type: String,
+        default: 'file'
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 自定义上传方法
+    requestMethod: {
+        type: Function,
+        default: undefined
+    },
+    // 是否显示上传进度
+    showUploadProgress: {
+        type: Boolean,
+        default: true
+    },
+    // 文件大小限制，单位：KB
+    sizeLimit: {
+        type: [Number, Object],
+        default: undefined
+    },
+    // 上传状态
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 上传组件风格
+    theme: {
+        type: String,
+        default: 'file',
+        validator: (val) => ['custom', 'file', 'file-input', 'file-flow', 'image', 'image-flow'].includes(val)
+    },
+    // 上传提示文本
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 是否在同一个请求中上传多个文件
+    uploadAllFilesInOneRequest: {
+        type: Boolean,
+        default: false
+    },
+    // 上传按钮属性
+    uploadButton: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否使用模拟的上传进度
+    useMockProgress: {
+        type: Boolean,
+        default: true
+    },
+    // 上传请求时是否携带cookies
+    withCredentials: {
+        type: Boolean,
+        default: false
+    },
+    // 是否使用内部上传服务，如果为true则忽略action参数
+    useInternalUpload: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'click',
+    'drag',
+    'drop',
+    'fail',
+    'preview',
+    'progress',
+    'remove',
+    'select-change',
+    'success',
+    'validate',
+    'update:files'
+]);
+
+// 当前上传进度
+const uploadProgress = ref(0);
+
+// 上传列表双向绑定
+const modelValue = computed({
+    get() {
+        // 优先返回内部文件列表，确保上传状态正确
+        if (internalFiles.value.length > 0) {
+            return internalFiles.value;
+        }
+        return props.modelValue;
+    },
+    set(value) {
+        // 同时更新内部文件列表和v-model
+        internalFiles.value = value;
+        emit('update:modelValue', value);
+    }
+});
+
+// 监听props.modelValue的变化，同步到internalFiles
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        if (newValue && Array.isArray(newValue) && newValue.length > 0) {
+            console.log('External modelValue changed, updating internal files:', newValue);
+            // 过滤掉可能的空值
+            const validFiles = newValue.filter(file => file && file.name);
+            if (validFiles.length > 0) {
+                internalFiles.value = validFiles;
+            }
+        }
+    },
+    { deep: true }
+);
+
+// 内部上传地址，如果提供了action且未启用内部上传则使用action，否则使用内部默认地址
+const internalAction = computed(() => {
+    return (props.action && !props.useInternalUpload) ? props.action : INTERNAL_UPLOAD_URL;
+});
+
+// 自定义上传方法，使用dataService进行上传
+const customRequestMethod = (options) => {
+    console.log('Upload options:', options);
+    
+    try {
+        // 解构选项，获取需要的属性
+        const { raw, onProgress, onSuccess, onError, data, method, name } = options || {};
+        
+        // 创建FormData
+        const formData = new FormData();
+        
+        // 创建一个执行上传的函数
+        const executeUpload = (fileToUpload) => {
+            console.log('Uploading file:', fileToUpload.name, fileToUpload.size);
+            formData.append('file', fileToUpload);
+            
+            // 添加额外数据
+            if (data) {
+                Object.keys(data).forEach(key => {
+                    formData.append(key, data[key]);
+                });
+            }
+
+            // 定义安全的进度回调
+            const safeProgressCallback = (progress) => {
+                uploadProgress.value = progress;
+                if (typeof onProgress === 'function') {
+                    onProgress({ percent: progress });
+                }
+            };
+
+            // 使用dataService上传文件
+            return dataService
+                .upload(INTERNAL_UPLOAD_URL, formData, safeProgressCallback)
+                .then(response => {
+                    console.log('Upload response:', response);
+                    
+                    // 在组件内部处理响应数据
+                    let formattedResponse;
+                    
+                    try {
+                        // 使用内部处理逻辑，不依赖props.formatResponse
+                        formattedResponse = defaultFormatResponse(response);
+                    } catch (error) {
+                        console.error('Error formatting response:', error);
+                        formattedResponse = { url: '', error: error.message };
+                    }
+                    
+                    // 确保格式化后的响应包含文件基本信息
+                    const fileObject = {
+                        ...formattedResponse,
+                        name: fileToUpload.name,
+                        size: fileToUpload.size,
+                        type: fileToUpload.type,
+                        status: 'success',
+                        raw: fileToUpload, // 保存原始文件对象
+                        lastModified: fileToUpload.lastModified
+                    };
+                    
+                    // 构建TDesign期望的成功响应对象
+                    const successResponse = {
+                        file: fileObject,        // 文件对象
+                        fileList: [fileObject],  // 文件列表(可能包含多个文件)
+                        response: {
+                            url: fileObject.url, // 必需的URL字段
+                            files: [fileObject], // 必需的files字段
+                            data: response       // 保留原始响应
+                        },
+                        e: { status: 'success' }, // 事件对象
+                        status: 'success'        // 必须的状态字段，只能是success或fail
+                    };
+                    
+                    console.log('Final formatted response:', successResponse);
+                    
+                    // 安全地调用成功回调
+                    if (typeof onSuccess === 'function') {
+                        onSuccess(successResponse);
+                    }
+                    return successResponse;
+                })
+                .catch(error => {
+                    console.error('Upload failed:', error);
+                    
+                    // 构建错误响应对象
+                    const failResponse = {
+                        error: error,
+                        status: 'fail',  // 必须的状态字段，值为fail
+                        e: { status: 'fail' }
+                    };
+                    
+                    // 安全地调用错误回调
+                    if (typeof onError === 'function') {
+                        onError(failResponse);
+                    }
+                    return Promise.reject(failResponse);
+                });
+        };
+        
+        // 尝试获取真实的文件对象
+        // 1. 首先检查raw是否直接是File对象
+        if (raw instanceof File) {
+            console.log('Using raw as File directly');
+            return executeUpload(raw);
+        } 
+        
+        // 2. 直接从options本身获取信息创建文件
+        if (options && options.name && options.type && options.size) {
+            // 我们找到了文件信息，但没有实际内容
+            // 我们需要使用FileReader获取实际文件或创建一个伪文件
+            console.log('Creating file from options properties');
+            
+            // 由于我们无法获取真实文件内容，创建一个伪文件
+            // 注意：这在实际上传时可能会失败，因为没有真实内容
+            const pseudoFileContent = new Blob([`Pseudo file content for ${options.name}`], { type: options.type });
+            const pseudoFile = new File([pseudoFileContent], options.name, {
+                type: options.type,
+                lastModified: options.lastModified || Date.now()
+            });
+            
+            // 创建一个隐藏的文件输入，让用户重新选择文件
+            // 这是一个备选方案
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.style.display = 'none';
+            fileInput.accept = options.type;
+            document.body.appendChild(fileInput);
+            
+            // 提示用户选择同一个文件
+            console.log('Please select the same file again');
+            alert(`上传出错：TDesign上传组件无法获取文件内容。请在出现的文件选择框中重新选择"${options.name}"文件。`);
+            
+            return new Promise((resolve, reject) => {
+                fileInput.onchange = (e) => {
+                    const selectedFile = e.target.files[0];
+                    if (selectedFile) {
+                        console.log('User selected file:', selectedFile.name);
+                        document.body.removeChild(fileInput);
+                        resolve(executeUpload(selectedFile));
+                    } else {
+                        document.body.removeChild(fileInput);
+                        const failResponse = {
+                            error: new Error('No file selected'),
+                            status: 'fail',
+                            e: { status: 'fail' }
+                        };
+                        reject(failResponse);
+                    }
+                };
+                
+                fileInput.onerror = (error) => {
+                    document.body.removeChild(fileInput);
+                    const failResponse = {
+                        error: error,
+                        status: 'fail',
+                        e: { status: 'fail' }
+                    };
+                    reject(failResponse);
+                };
+                
+                // 触发文件选择
+                fileInput.click();
+            });
+        }
+        
+        console.error('Cannot find valid file information', options);
+        if (typeof onError === 'function') {
+            const failResponse = {
+                error: new Error('No valid file information found'),
+                status: 'fail',
+                e: { status: 'fail' }
+            };
+            onError(failResponse);
+        }
+        return Promise.reject({
+            error: new Error('No valid file information found'),
+            status: 'fail',
+            e: { status: 'fail' }
+        });
+    } catch (err) {
+        console.error('Upload error in customRequestMethod:', err);
+        return Promise.reject({
+            error: err,
+            status: 'fail',
+            e: { status: 'fail' }
+        });
+    }
+};
+
+// 上传前钩子，如果设置了beforeUpload则先执行
+const handleBeforeUpload = (file, options) => {
+    if (props.beforeUpload) {
+        return props.beforeUpload(file, options);
+    }
+    return true;
+};
+
+// 监听internalFiles的变化，记录调试信息
+watch(
+    internalFiles,
+    (newFiles) => {
+        console.log('Internal files changed:', newFiles);
+    },
+    { deep: true }
+);
+
+// 文件状态变化事件
+const handleChange = (value, context) => {
+    console.log('Upload change event:', value, context);
+    
+    // 如果是上传成功，确保文件被添加到内部列表
+    if (context && context.file && context.file.status === 'success') {
+        const successFile = context.file;
+        
+        // 检查是否已存在于内部文件列表
+        const fileExists = internalFiles.value.some(
+            file => file.name === successFile.name && file.size === successFile.size
+        );
+        
+        if (!fileExists) {
+            console.log('Adding successful file from change event:', successFile);
+            internalFiles.value = [...internalFiles.value, successFile];
+            
+            // 更新v-model和files属性
+            emit('update:modelValue', internalFiles.value);
+            emit('update:files', internalFiles.value);
+        }
+    }
+    
+    emit('change', value, context);
+};
+
+// 点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+
+// 拖拽事件
+const handleDrag = (context) => {
+    emit('drag', context);
+};
+
+// 文件拖放事件
+const handleDrop = (context) => {
+    emit('drop', context);
+};
+
+// 上传失败事件
+const handleFail = (options) => {
+    emit('fail', options);
+};
+
+// 点击预览事件
+const handlePreview = (options) => {
+    emit('preview', options);
+};
+
+// 上传进度事件
+const handleProgress = (options) => {
+    emit('progress', options);
+};
+
+// 移除文件事件
+const handleRemove = (context) => {
+    if (context && context.file) {
+        // 从内部文件列表中移除文件
+        const removedFile = context.file;
+        
+        // 根据name和size过滤掉要删除的文件
+        internalFiles.value = internalFiles.value.filter(
+            file => !(file.name === removedFile.name && file.size === removedFile.size)
+        );
+        
+        // 同时更新v-model绑定的值，保持一致性
+        emit('update:modelValue', internalFiles.value);
+        
+        // 更新files属性，支持v-model:files双向绑定
+        emit('update:files', internalFiles.value);
+    }
+    
+    // 发出原始移除事件
+    emit('remove', context);
+};
+
+// 选择文件变化事件
+const handleSelectChange = (files, context) => {
+    emit('select-change', files, context);
+};
+
+// 上传成功事件
+const handleSuccess = (context) => {
+    console.log('Upload success event triggered:', context);
+    
+    // 将上传成功的文件添加到文件列表中
+    // 首先检查文件是否已经在列表中
+    if (context && context.file) {
+        // 获取有效的URL
+        let fileUrl = '';
+        if (context.file.url) {
+            fileUrl = context.file.url;
+        } else if (context.response && context.response.url) {
+            fileUrl = context.response.url;
+        } else if (context.response && context.response.data && typeof context.response.data === 'string') {
+            fileUrl = context.response.data;
+        }
+        
+        const newFile = {
+            ...context.file,
+            url: fileUrl,  // 确保有URL
+            status: 'success',            // 设置状态为成功
+            response: context.response    // 保留响应
+        };
+        
+        console.log('Adding file to internal files:', newFile);
+
+        // 创建新的文件列表副本，以便进行修改
+        const currentFiles = [...internalFiles.value];
+        
+        // 检查文件是否已存在（基于name和size）
+        const fileExists = currentFiles.some(
+            file => file.name === newFile.name && file.size === newFile.size
+        );
+        
+        // 如果文件不存在于列表中，则添加它
+        if (!fileExists) {
+            currentFiles.push(newFile);
+            // 更新内部文件列表
+            internalFiles.value = currentFiles;
+        } else {
+            // 如果文件已存在，更新其状态和URL
+            internalFiles.value = currentFiles.map(file => {
+                if (file.name === newFile.name && file.size === newFile.size) {
+                    return { ...file, ...newFile };
+                }
+                return file;
+            });
+        }
+        
+        console.log('Updated internal files:', internalFiles.value);
+        
+        // 同时更新v-model绑定的值，保持一致性
+        emit('update:modelValue', internalFiles.value);
+        
+        // 更新files属性，支持v-model:files双向绑定
+        emit('update:files', internalFiles.value);
+    } else {
+        console.warn('Missing file in success context:', context);
+    }
+    
+    // 发出原始成功事件
+    emit('success', context);
+};
+
+// 校验事件
+const handleValidate = (context) => {
+    emit('validate', context);
+};
+
+// 手动添加已上传的文件到文件列表
+const addUploadedFile = (file) => {
+    if (!file || !file.name || !file.url) {
+        console.error('Invalid file object. File must contain at least name and url properties.');
+        return false;
+    }
+    
+    // 构建完整的文件对象
+    const fileObject = {
+        name: file.name,
+        url: file.url,
+        size: file.size || 0,
+        type: file.type || '',
+        status: 'success',
+        // 如果提供了原始文件对象，则使用它
+        raw: file.raw || null,
+        lastModified: file.lastModified || new Date().getTime(),
+        ...file
+    };
+    
+    // 检查文件是否已存在
+    const fileExists = internalFiles.value.some(
+        f => f.name === fileObject.name && f.url === fileObject.url
+    );
+    
+    if (!fileExists) {
+        // 更新内部文件列表
+        internalFiles.value = [...internalFiles.value, fileObject];
+        
+        // 同时更新v-model绑定的值，保持一致性
+        emit('update:modelValue', internalFiles.value);
+        
+        // 更新files属性，支持v-model:files双向绑定
+        emit('update:files', internalFiles.value);
+        return true;
+    }
+    
+    return false;
+};
+
+// 导出组件方法供外部使用
+defineExpose({
+    addUploadedFile,
+    // 导出内部文件列表，允许外部读取
+    getFiles: () => internalFiles.value
+});
+
+// 组件挂载时初始化文件列表
+onMounted(() => {
+    initializeFiles();
+});
+
+// 监听files的变化，更新内部文件列表
+watch(
+    () => props.files,
+    () => {
+        initializeFiles();
+    },
+    { deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>