@cmstops/pro-compo/lib/hooks/useUpload.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
var vue = require("vue");
var index = require("../utils/index.js");
var tusUpload = require("../utils/tusUpload.js");
var request = require("../utils/request.js");
var transcodeMedia = require("../utils/transcodeMedia.js");
var useLocalStorage = require("./useLocalStorage.js");
function getSize(value) {
  if (!value)
    return "";
  let i = -1;
  const byteUnits = [" KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
  do {
    value /= 1024;
    i++;
  } while (value >= 1024);
  return value.toFixed(2) + byteUnits[i];
}
function addMedia(BASE_API, params) {
  return request(BASE_API, {
    url: "/poplar/v2/media/add",
    method: "post",
    data: params
  });
}
function getMediaDetails(BASE_API, repoId, id) {
  return request(BASE_API, {
    url: `/poplar/v2/repo/${repoId}/media?where=id__eq:${id}`,
    method: "get"
  });
}
function reTranscodeMedia(BASE_API, media_id) {
  return request(BASE_API, {
    url: "/poplar/v3/attachment/re_transcoding",
    method: "post",
    data: { media_id }
  });
}
function useUpload(options) {
  const { get, set, remove } = useLocalStorage["default"]("LOCAL_RESOURCES");
  const list = vue.ref(get() || []);
  function uploadSuccess(file) {
    const originList = list.value;
    const taskIndex = originList.findIndex(
      (task) => task.sig_id === file.sig_id
    );
    if (taskIndex !== -1) {
      originList[taskIndex] = file;
      list.value = originList;
    }
  }
  function recordTaskStatusChange(file, progress, isTrans) {
    const originList = list.value;
    const taskIndex = originList.findIndex((task) => task.id === file.id);
    if (taskIndex !== -1) {
      progress !== -1 && (originList[taskIndex].progress = progress.toFixed(2));
      file.status != null && (originList[taskIndex].status = file.status);
      file.msg != null && (originList[taskIndex].msg = file.msg);
      file.mediaFile && (originList[taskIndex].mediaFile = file.mediaFile);
      if (isTrans)
        originList[taskIndex].isTrans = true;
      originList[taskIndex].url = file.url;
    } else {
      file.created_at = new Date().getTime();
      originList.unshift({ ...file, progress, status: 1 });
    }
    list.value = originList;
  }
  const removeRecord = (file) => {
    const originList = list.value;
    const taskIndex = originList.findIndex((task) => task.id === file.id);
    if (taskIndex !== -1) {
      originList.splice(taskIndex, 1);
      list.value = originList;
    }
  };
  const uploadFile = (BASE_API, file, dir = 0, repoId, callback, upOptions) => {
    const newFile = {
      id: file.id || index.generateUUID(),
      sig_id: file.sig_id || index.generateUUID(),
      name: file.name,
      url: "",
      size: file.size,
      isUpload: true,
      type: file.type,
      originFile: file
    };
    const upload = new tusUpload.TusUploadTask(file);
    newFile.abort = () => upload.abort();
    recordTaskStatusChange({ ...newFile, status: 1, msg: "\u4E0A\u4F20\u4E2D\u2026\u2026" }, 0);
    const progress = (percent, total) => {
      const progress2 = percent / total;
      recordTaskStatusChange(newFile, progress2);
    };
    const uploading = upload.start(progress);
    uploading.then(async (url) => {
      var _a;
      if (options == null ? void 0 : options.noAddMedia) {
        recordTaskStatusChange({ ...newFile, status: 0, url }, 1);
        callback && callback({ ...newFile, url }, "success");
        return;
      }
      const params = {};
      if ((_a = upOptions == null ? void 0 : upOptions.template) == null ? void 0 : _a.watermark) {
        params.watermark = upOptions.template.watermark.default;
      }
      const { code, message } = await addMedia(BASE_API, {
        url,
        size: newFile.size,
        directory_id: dir,
        repository_id: repoId,
        catalog: newFile.type,
        alias: newFile.name,
        ...params
      });
      if (code !== 0) {
        console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", newFile.name, code, message);
        recordTaskStatusChange({ ...newFile, status: 2, msg: "\u4E0A\u4F20\u5931\u8D25" }, -1);
        return;
      }
      console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u4E0A\u4F20\u6210\u529F\uFF1A", url, message);
      if (!["video", "audio"].includes(message.catalog)) {
        recordTaskStatusChange({ ...newFile, url: message.url, status: 0 }, 1);
        setTimeout(() => uploadSuccess({ ...message, sig_id: newFile.sig_id }), 200);
      } else {
        recordTaskStatusChange(newFile, 0);
      }
      callback && callback({ ...message, sig_id: newFile.sig_id }, "success");
    }).catch((e) => {
      console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", e);
      setTimeout(() => {
        recordTaskStatusChange({ ...newFile, status: 2, msg: "\u4E0A\u4F20\u5931\u8D25" }, -1);
      }, 1e3);
      callback && callback(newFile, "fail");
    });
  };
  const transcodingFile = (BASE_API, file, repoId) => {
    if (!["video", "audio"].includes(file.catalog))
      return;
    const task = new transcodeMedia.TranscodingTask(file);
    const idx = list.value.findIndex(
      (item2) => item2.sig_id === file.sig_id
    );
    if (idx === -1)
      return;
    const item = list.value[idx];
    recordTaskStatusChange({ ...item, status: 1, msg: "\u8F6C\u7801\u4E2D\u2026\u2026" }, 0, true);
    const progress = (progress2) => recordTaskStatusChange(item, progress2);
    const transing = task.start(BASE_API, progress);
    transing.then(async (res) => {
      if (res) {
        console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u8F6C\u7801\u6210\u529F", res);
        recordTaskStatusChange({ ...item, status: 0 }, 1);
        const { code, message } = await getMediaDetails(BASE_API, repoId, file.id);
        if (code !== 0)
          throw new Error(message);
        const { file: fileList } = message;
        const [resFile] = fileList.data;
        setTimeout(() => uploadSuccess({ ...file, url: resFile.url }), 200);
      } else {
        console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u8F6C\u7801\u5931\u8D25\uFF1A", item);
        recordTaskStatusChange(
          { ...item, mediaFile: file, status: 3, msg: "\u8F6C\u7801\u5931\u8D25" },
          -1
        );
      }
    }).catch((e) => {
      console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u8F6C\u7801\u5931\u8D25", e, file);
      recordTaskStatusChange(
        { ...item, mediaFile: file, status: 3, msg: "\u8F6C\u7801\u5931\u8D25" },
        -1
      );
    });
  };
  const reTranscode = async (BASE_API, file) => {
    try {
      const { code } = await reTranscodeMedia(BASE_API, file.id);
      if (code !== 0)
        return false;
      return true;
    } catch (e) {
      console.log(e);
      return false;
    }
  };
  vue.watch(() => list.value, set, { deep: true });
  window.addEventListener("beforeunload", remove, false);
  return {
    list,
    uploadFile,
    reTranscode,
    transcodingFile,
    recordTaskStatusChange,
    removeRecord
  };
}
function getConfiguration(BASE_API, params) {
  return request(BASE_API, {
    url: `poplar/v2/settings`,
    method: "get",
    params
  });
}
function getWatermarkTemplate(BASE_API) {
  return request(BASE_API, {
    url: `/poplar/v2/material/image/watermark`,
    method: "get"
  });
}
function useUploadConfig() {
  const { get, set, remove } = useLocalStorage["default"]("LOCAL_UPLOAD_CONFIG");
  const config = vue.ref(get() || {});
  const template = vue.ref({});
  async function initUploadConfig(BASE_API, domainId) {
    if (config.value.size_config_enabled != null)
      return;
    try {
      const { code, message } = await getConfiguration(BASE_API, {
        domain_id: domainId,
        module: "platform",
        key: "size",
        cloud: true
      });
      if (code !== 0)
        return;
      const [{ value }] = message;
      config.value = JSON.parse(value);
      set(value);
    } catch (e) {
      console.log("\u4E0A\u4F20\u914D\u7F6E\u83B7\u53D6\u5931\u8D25", e);
    }
  }
  function checkFileSizeOutLimit(file, callback) {
    if (!file)
      return true;
    const { type, size, name } = file;
    const { file_size, image_size, video_size, audio_size, enable } = config.value;
    let typeCN = "";
    let limitSize = file_size;
    if (!enable)
      return true;
    if (type.startsWith("image")) {
      typeCN = "\u56FE\u7247";
      limitSize = image_size;
    } else if (type.startsWith("video")) {
      typeCN = "\u89C6\u9891";
      limitSize = video_size;
    } else if (type.startsWith("audio")) {
      typeCN = "\u97F3\u9891";
      limitSize = audio_size;
    } else {
      limitSize = file_size;
    }
    if (size <= limitSize) {
      return true;
    }
    callback(
      `"${name}" \u592A\u5927\uFF0C\u8BF7\u4E0A\u4F20\u4E0D\u5927\u4E8E ${getSize(limitSize)} \u7684 ${typeCN} \u6587\u4EF6\u3002`
    );
    return false;
  }
  async function initTemplate(BASE_API) {
    try {
      const { code, message } = await getWatermarkTemplate(BASE_API);
      if (code !== 0)
        return;
      if (message) {
        let defaultWaterMark;
        if (Array.isArray(message.images)) {
          message.images.forEach((item) => {
            if (message.default === item.id)
              defaultWaterMark = item;
          });
        }
        template.value = {
          watermark: {
            default: defaultWaterMark,
            images: message.images
          }
        };
      }
    } catch (e) {
      console.error(e);
    }
  }
  window.addEventListener("beforeunload", remove, false);
  return {
    config,
    template,
    checkFileSizeOutLimit,
    initUploadConfig,
    initTemplate
  };
}
exports.addMedia = addMedia;
exports["default"] = useUpload;
exports.getMediaDetails = getMediaDetails;
exports.getSize = getSize;
exports.getWatermarkTemplate = getWatermarkTemplate;
exports.reTranscodeMedia = reTranscodeMedia;
exports.useUploadConfig = useUploadConfig;