wxapp_shuibei/hooks/useImageUpload.js

import { ref } from "vue";
import { HTTP_REQUEST_URL, TOKENNAME } from "@/config/app.js";
import { toLogin, checkLogin } from "@/libs/login";
import { useAppStore } from "@/stores/app";
import { useToast } from "@/hooks/useToast";

export function useImageUpload(formData) {
  const imageList = ref([]);
  const appStore = useAppStore();
  const uploadLoading = ref(false);
  const { Toast } = useToast();

  // 上传单个文件
  const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: `${HTTP_REQUEST_URL}/api/front/user/upload/image`,
        filePath: url,
        name: "multipart",
        header: {
          [TOKENNAME]: appStore.tokenComputed,
        },
        formData,
        success: (res) => {
          // 兼容后端返回格式
          let data = res.data;
          if (typeof data === "string") {
            try {
              data = JSON.parse(data);
            } catch (e) {}
          }
          console.log("data", data);
          if (data?.code === 200) {
            resolve(data.data);
          } else {
            reject(data.data);
          }
        },
        fail: reject,
      });
    });
  };

  // 处理上传
  const afterRead = async (event) => {
    if (!appStore.tokenComputed && !checkLogin()) {
      toLogin();
      return Promise.reject({ msg: "未登录" });
    }
    uploadLoading.value = true;
    let lists = [].concat(event.file);
    let fileListLen = imageList.value.length;
    lists.forEach((item) => {
      imageList.value.push({
        ...item,
        status: "uploading",
        message: "上传中",
      });
    });

    // 逐个上传，每个都 try-catch，保证每个图片都能更新状态
    for (let i = 0; i < lists.length; i++) {
      const curIndex = fileListLen + i;
      try {
        const result = await uploadFilePromise(lists[i].url);
        imageList.value.splice(curIndex, 1, {
          ...imageList.value[curIndex],
          status: "success",
          message: "",
          info: result,
        });
      } catch (error) {
        imageList.value.splice(curIndex, 1, {
          ...imageList.value[curIndex],
          status: "failed",
          message: "上传失败",
        });
      }
    }
    uploadLoading.value = false;
  };

  // 删除图片
  const deletePic = (event) => {
    imageList.value.splice(event.index, 1);
  };

  return {
    uploadLoading,
    imageList,
    afterRead,
    deletePic,
  };
}