gypsy-crm-frontend-vu/composables/useUpload.js

// composables/useUpload.js
import { ref } from 'vue';
import { upload } from '../utils/request';

/**
 * 图片上传组合式函数（管理上传状态）
 * @param {Object} defaultOptions - 默认上传配置（如url、name）
 * @param {boolean} [immediate=false] - 是否立即执行（默认false，需手动调用upload）
 * @returns {Object} - { loading, progress, data, error, upload, reset }
 */
export const useUpload = (defaultOptions = {}, immediate = false) => {
  const loading = ref(false); // 整体加载状态
  const progress = ref(0); // 上传进度（0-100，多文件时取平均值）
  const data = ref(null); // 上传成功结果
  const error = ref(null); // 错误信息

  // 重置状态
  const reset = () => {
    loading.value = false;
    progress.value = 0;
    data.value = null;
    error.value = null;
  };

  // 核心上传方法
  const uploadFile = async (customOptions = {}) => {
    reset(); // 上传前重置状态
    loading.value = true;

    try {
      // 合并默认配置与自定义配置（自定义配置优先级更高）
      const finalOptions = {
        ...defaultOptions,
        ...customOptions,
        // 进度监听（覆盖默认，统一处理进度）
        onProgressUpdate: (res) => {
          progress.value = res.progress; // 更新进度
          // 若有自定义进度监听，执行它
          if (customOptions.onProgressUpdate) {
            customOptions.onProgressUpdate(res);
          }
        },
      };

      // 调用上传工具
      const result = await upload(finalOptions);
      data.value = result; // 保存上传结果
      return result;
    } catch (err) {
      error.value = err; // 保存错误信息
      throw err; // 抛出错误，方便组件内捕获
    } finally {
      loading.value = false; // 结束加载
    }
  };

  // 若immediate为true，立即执行上传（需确保defaultOptions有filePath）
  if (immediate && defaultOptions.filePath) {
    uploadFile();
  }

  return {
    loading, // 加载中状态
    progress, // 上传进度
    data, // 成功结果
    error, // 错误信息
    upload: uploadFile, // 触发上传的方法
    reset, // 重置状态
  };
};