// 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, // 重置状态 }; };