vuux/dist/es/Upload/src/hook/useUpload.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as g, computed as q, watch as R } from "vue";
import { UploadRequest as E } from "./useUploadAjax.mjs";
import { formattingData as L } from "../utils.mjs";
import { Utils as m } from "@vuux/utils";
import { Message as h } from "../../../Message/index.mjs";
import { ImagePreview as O } from "../../../ImagePreview/index.mjs";
const K = (t, x, o) => {
  const c = g(!1), v = g(!1), e = g([]), f = /* @__PURE__ */ new Map(), M = q(() => e.value.length < t.limit), I = () => {
    t.disabled || x.value && x.value.click();
  }, U = () => {
    t.disabled || (c.value = !0);
  }, b = () => {
    t.disabled || (c.value = !1);
  }, z = (a) => {
    const l = e.value.findIndex((i) => i.uid === a.uid);
    l !== -1 && e.value.splice(l, 1, { ...e.value[l], status: "uploading", percent: 0 });
    const n = (i) => {
      f.delete(i), o("change", e.value);
    }, s = async (i) => {
      v.value = !0, await m.wait(2e3);
      const r = e.value.findIndex((u) => u.uid === i);
      r !== -1 && e.value[r]?.status === "error" && (e.value.splice(r, 1), o("change", e.value), o("update:files", e.value)), v.value = !1;
    };
    if (!a.uid)
      return;
    const F = E({
      uid: a.uid,
      uploadUrl: t.action,
      selectedFile: a.raw,
      //自定义请求头
      headers: t.headers,
      //额外上传参数
      data: t.data,
      //上传文件字段名
      name: t.name,
      onProgress: (i, r) => {
        const u = e.value.findIndex((d) => d.uid === i);
        u !== -1 && (e.value[u] = { ...e.value[u], percent: r }), o("progress", Math.round(r));
      },
      onSuccess: (i, r) => {
        const u = e.value.findIndex((d) => d.uid === i);
        u !== -1 && (e.value[u] = { ...e.value[u], status: "success", response: r }), o("success", r, a), n(i);
      },
      onError: (i, r) => {
        const u = e.value.findIndex((d) => d.uid === i);
        u !== -1 && (e.value[u] = { ...e.value[u], status: "error", error: r }), o("error", a), n(i), s(i);
      }
    });
    f.set(a.uid ?? m.snowflakeId().toString(), F);
  }, w = async (a) => {
    let l = e.value.length;
    for (const n of a) {
      if (t.maxSizeMb && n.size > t.maxSizeMb * 1024 * 1024) {
        h.error(`文件"${n.name}"超过最大限制${t.maxSizeMb}MB`);
        continue;
      }
      if (t.limit && l >= t.limit) {
        h.error("已达到最大上传数量");
        break;
      }
      if (t.beforeUpload && !await t.beforeUpload(n))
        continue;
      const s = {
        uid: m.snowflakeId().toString(),
        name: n.name,
        size: n.size,
        status: "ready",
        percent: 0,
        raw: n,
        //生成临时地址
        //url: props.type === 'images' ? URL.createObjectURL(file) : ''
        url: URL.createObjectURL(n)
      };
      t.multiple ? e.value.push(s) : e.value = [s], l++, z(s);
    }
  }, S = (a) => {
    if (t.disabled)
      return;
    c.value = !1;
    const l = Array.from(a.dataTransfer?.files || []);
    w(l);
  }, y = (a) => {
    const l = a.target, n = Array.from(l.files || []);
    if (n.length > t.limit) {
      h.error("上传最大数量为[" + t.limit + "]");
      return;
    }
    w(n), l.value = "";
  }, B = (a) => {
    const l = e.value.findIndex((n) => n.uid === a.uid);
    if (l !== -1) {
      if (a.status === "uploading" && a.uid) {
        const n = f.get(a.uid);
        n?.cancel && n.cancel(), f.delete(a.uid);
      }
      e.value.splice(l, 1), o("change", e.value), o("delete", a), o("update:files", e.value);
    }
  }, D = (a) => {
    if (a === 0)
      return "0 Bytes";
    const l = 1024, n = ["Bytes", "KB", "MB", "GB"], s = Math.floor(Math.log(a) / Math.log(l));
    return parseFloat((a / Math.pow(l, s)).toFixed(2)) + " " + n[s];
  }, k = (a) => {
    O(a);
  };
  return R(
    () => t.files,
    (a) => {
      e.value = [...L(a)];
    },
    { deep: !0 }
  ), {
    isDragging: c,
    isError: v,
    uploadFiles: e,
    isDisplay: M,
    handleImagePreview: k,
    onFileInput: I,
    handleDragOver: U,
    handleDragLeave: b,
    handleDrop: S,
    handleFileChange: y,
    removeFile: B,
    formatFileSize: D
  };
};
export {
  K as useUpload
};