H5版

参考项目：凤娱指数/凤向标

API 接口

// 调起相册选择图片API生成blog转url
export const chooseImage = (options) => {
  const { count = 1, success, complete, imageId = "taroChooseImage" } = options;

  let taroChooseImageId = document.getElementById(imageId);

  if (!taroChooseImageId) {
    const obj = document.createElement("input");

    obj.setAttribute("type", "file");
    obj.setAttribute("id", imageId);
    if (count > 1) {
      obj.setAttribute("multiple", "multiple");
    }
    obj.setAttribute("accept", "image/*");
    obj.setAttribute(
      "style",
      "position: fixed; top: -4000px; left: -3000px; z-index: -300;"
    );
    document.body.appendChild(obj);
    taroChooseImageId = document.getElementById(imageId);
  } else if (count > 1) {
    taroChooseImageId.setAttribute("multiple", "multiple");
  } else {
    taroChooseImageId.removeAttribute("multiple");
  }

  let taroChooseImageCallback = null;

  const taroChooseImagePromise = new Promise((resolve) => {
    taroChooseImageCallback = resolve;
  });
  const TaroMouseEvents = document.createEvent("MouseEvents");

  TaroMouseEvents.initEvent("click", true, true);
  taroChooseImageId.dispatchEvent(TaroMouseEvents);
  taroChooseImageId.onchange = (e) => {
    const arr = [...e.target.files];
    let num = 0;

    arr &&
      arr.forEach(async (item) => {
        const res = {
          errMsg: "chooseImage:ok",
          tempFilePaths: [],
          tempFiles: [],
        };
        console.log("item", item);

        const blob = new Blob([item], {
          type: item.type,
        });

        const fileReaderBuffer = new FileReader();
        const fileReader = new FileReader();

        // 读取是否是heic格式图片
        fileReaderBuffer.onload = async () => {
          const type = getFileType(fileReaderBuffer);

          if (type.includes("/heic")) {
            Alert.default({
              content: "图片格式需转换，请耐心等待",
              delay: 1500,
            });
            heic2any({ blob: item, toType: "image/jpeg" })
              .then((res) => {
                fileReader.readAsDataURL(res);
              })
              .catch(() => {
                Alert.default({
                  content: "暂不支持该图片格式，请上传其他图片",
                });
                e.target.value = "";
              });

            return;
          } else {
            const url = URL.createObjectURL(blob);

            num++;
            res.tempFilePaths.push(url);
            res.tempFiles.push({
              path: url,
              size: item.size,
              type: item.type,
              originalFileObj: item,
            });
            typeof success === "function" && success(res, num);
            typeof complete === "function" && complete(res, num);
            taroChooseImageCallback(res);
            e.target.value = "";
          }
        };

        fileReaderBuffer.onerror = () => {
          taroChooseImageCallback(res);
          e.target.value = "";
        };

        fileReader.onload = (e1) => {
          console.log(2);
          compress(e1.target?.result, 0.5, async (url) => {
            const originalFileObj = await dataURLtoFile(url);

            num++;
            res.tempFilePaths.push(url);
            res.tempFiles.push({
              path: url,
              size: item.size,
              type: item.type,
              originalFileObj,
            });
            typeof success === "function" && success(res, num);
            typeof complete === "function" && complete(res, num);
            taroChooseImageCallback(res);
            e.target.value = "";
          });
        };

        fileReader.onerror = () => {
          taroChooseImageCallback(res);
          e.target.value = "";
        };

        fileReaderBuffer.readAsArrayBuffer(item);
      });
  };

  return taroChooseImagePromise;
};

chooseImage({
  count: 1,
  success: (res) => {
    const files = res?.tempFiles
      ?.splice(0, 1)
      ?.map((item) => ({ ...item, uuid: uuidv4() }));

    const cos = new Core(newCors());

    files.forEach(async (item) => {
      const { originalFileObj: file, uuid } = item;

      if (file && file.size) {
        const key = await getMediaKey(file, listId);

        cos.uploadFile({
          file,
          key,
          options: {
            needAutoOrient: true,
          },
          success(res) {
            setUploadImg(res?.sourcePath);
            setTimeout(() => {
              setImgEditor(true);
            }, 300);
          },
        });
      }
    });
  },
});