@web-utils/component 2.0.13 → 2.7.0

package/dist/components/fy-upload/index.js

@@ -0,0 +1,704 @@
+import { p as j, e as z } from "../../chunks/event.50c365eb.js";
+import { C as R, c as x, i as w, m as D } from "../../chunks/util.5053d54e.js";
+import { p as S } from "../../chunks/packages.5d7a86c4.js";
+import { n as I } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+function A(t, e) {
+  var i = new FileReader();
+  i.readAsDataURL(t), i.onload = function(o) {
+    e(o.target.result);
+  };
+}
+function $(t, e = {}, i) {
+  const { text: o, fontFamily: a, color: n, fontSize: l, opacity: d, bottom: y, right: p, ratio: v } = e;
+  g(), A(t, _);
+  function g() {
+    config.text = o || config.text, config.fontFamily = a || config.fontFamily, config.color = n || config.color, config.fontSize = l || config.fontSize, config.opacity = d || config.opacity, config.bottom = y || config.bottom, config.right = p || config.right, config.ratio = v || config.ratio;
+  }
+  function _(f) {
+    var c = new Image();
+    c.src = f, c.onload = function() {
+      var h = c.width, s = c.height;
+      r(h, s), ctx.drawImage(c, 0, 0, h, s), O(h, s);
+      const m = document.getElementById("canvas").toDataURL(t.type, config.ratio), C = R(m, t.name);
+      i && i(C);
+    };
+  }
+  function r(f, c) {
+    canvas = document.getElementById("canvas"), canvas === null && (canvas = document.createElement("canvas"), canvas.id = "canvas", canvas.className = "avue-canvas", document.body.appendChild(canvas)), ctx = canvas.getContext("2d"), canvas.width = f, canvas.height = c;
+  }
+  function O(f, c) {
+    var h = config.text, s = k(h, f, c);
+    ctx.font = s.fontSize + "px " + config.fontFamily, ctx.fillStyle = config.color, ctx.globalAlpha = config.opacity / 100, ctx.fillText(h, s.x, s.y);
+  }
+  function k(f, c, h) {
+    var s, m, C = config.fontSize / configDefault.width, T = C * c;
+    config.bottom ? m = configDefault.height - config.bottom : m = config.top, config.right ? s = configDefault.width - config.right : s = config.left, ctx.font = config.fontSize + "px " + config.fontFamily;
+    var P = Number(ctx.measureText(f).width);
+    s = s - P;
+    var E = s / configDefault.width, U = m / configDefault.height;
+    return s = E * c, m = U * h, {
+      x: s,
+      y: m,
+      fontSize: T
+    };
+  }
+}
+const L = (t, e, i) => {
+  var o = JSON.stringify(i);
+  __ENV__ === "development" && console && console.log("put_policy = ", o);
+  var a = B(N(o));
+  __ENV__ === "development" && console && console.log("encoded = ", a);
+  var n = CryptoJS.HmacSHA1(a, e), l = n.toString(CryptoJS.enc.Base64);
+  __ENV__ === "development" && console && console.log("encoded_signed=", l);
+  var d = t + ":" + K(l) + ":" + a;
+  return __ENV__ === "development" && console && console.log("upload_token=", d), d;
+};
+function N(t) {
+  var e, i, o, a;
+  for (e = "", o = t.length, i = 0; i < o; i++)
+    a = t.charCodeAt(i), a >= 1 && a <= 127 ? e += t.charAt(i) : a > 2047 ? (e += String.fromCharCode(224 | a >> 12 & 15), e += String.fromCharCode(128 | a >> 6 & 63), e += String.fromCharCode(128 | a >> 0 & 63)) : (e += String.fromCharCode(192 | a >> 6 & 31), e += String.fromCharCode(128 | a >> 0 & 63));
+  return e;
+}
+var u = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+new Array(
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  62,
+  -1,
+  -1,
+  -1,
+  63,
+  52,
+  53,
+  54,
+  55,
+  56,
+  57,
+  58,
+  59,
+  60,
+  61,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31,
+  32,
+  33,
+  34,
+  35,
+  36,
+  37,
+  38,
+  39,
+  40,
+  41,
+  42,
+  43,
+  44,
+  45,
+  46,
+  47,
+  48,
+  49,
+  50,
+  51,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1
+);
+function B(t) {
+  var e, i, o, a, n, l;
+  for (o = t.length, i = 0, e = ""; i < o; ) {
+    if (a = t.charCodeAt(i++) & 255, i == o) {
+      e += u.charAt(a >> 2), e += u.charAt((a & 3) << 4), e += "==";
+      break;
+    }
+    if (n = t.charCodeAt(i++), i == o) {
+      e += u.charAt(a >> 2), e += u.charAt((a & 3) << 4 | (n & 240) >> 4), e += u.charAt((n & 15) << 2), e += "=";
+      break;
+    }
+    l = t.charCodeAt(i++), e += u.charAt(a >> 2), e += u.charAt((a & 3) << 4 | (n & 240) >> 4), e += u.charAt((n & 15) << 2 | (l & 192) >> 6), e += u.charAt(l & 63);
+  }
+  return e;
+}
+var K = function(t) {
+  return t = t.replace(/\+/g, "-"), t = t.replace(/\//g, "_"), t;
+};
+const M = (t) => {
+  var e = new OSS(t);
+  return e;
+};
+var q = function() {
+  var t = this, e = t.$createElement, i = t._self._c || e;
+  return i("div", {
+    directives: [{
+      name: "loading",
+      rawName: "v-loading.lock",
+      value: t.loading,
+      expression: "loading",
+      modifiers: {
+        lock: !0
+      }
+    }],
+    staticClass: "avue-upload",
+    attrs: {
+      "element-loading-text": t.loadText
+    }
+  }, [i("ElUpload", {
+    key: t.reload,
+    class: {
+      "avue-upload__list": t.listType === "picture-img",
+      "avue-upload__upload": t.disabled
+    },
+    attrs: {
+      action: t.action,
+      "on-remove": t.handleRemove,
+      accept: t.acceptList,
+      "before-remove": t.beforeRemove,
+      multiple: t.multiple,
+      "on-preview": t.handlePreview,
+      limit: t.limit,
+      "http-request": t.httpUpload,
+      readonly: t.readonly,
+      drag: t.dragFile,
+      "show-file-list": t.isPictureImg ? !1 : t.showFileList,
+      "list-type": t.listType,
+      "on-change": t.handleFileChange,
+      "on-exceed": t.handleExceed,
+      disabled: t.disabled,
+      "file-list": t.fileList
+    },
+    nativeOn: {
+      click: function(o) {
+        return t.handleClick.apply(null, arguments);
+      }
+    },
+    scopedSlots: t._u([{
+      key: "file",
+      fn: function(o) {
+        var a = o.file;
+        return [t.$scopedSlots.default ? t._t("default", null, {
+          file: a
+        }) : t.listType === "picture-card" ? i("span", [t.isMediaType(a.url) ? i(a.type, {
+          tag: "Component",
+          staticClass: "el-upload-list__item-thumbnail",
+          attrs: {
+            src: a.url
+          }
+        }) : i("i", {
+          staticClass: "avue-upload__avatar el-icon-document",
+          attrs: {
+            src: a.url
+          }
+        }), i("span", {
+          staticClass: "el-upload-list__item-actions"
+        }, [i("span", {
+          staticClass: "el-upload-list__item-preview"
+        }, [i("i", {
+          staticClass: "el-icon-zoom-in",
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handlePreview(a);
+            }
+          }
+        })]), i("span", {
+          staticClass: "el-upload-list__item-delete"
+        }, [t.disabled ? t._e() : i("i", {
+          staticClass: "el-icon-delete",
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handleRemove(a);
+            }
+          }
+        })])])], 1) : t.listType === "picture" ? i("span", {
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handlePreview(a);
+            }
+          }
+        }, [i(a.type, {
+          tag: "Component",
+          staticClass: "el-upload-list__item-thumbnail",
+          attrs: {
+            src: a.url
+          }
+        }), i("a", {
+          staticClass: "el-upload-list__item-name"
+        }, [i("i", {
+          staticClass: "el-icon-document"
+        }), t._v(" " + t._s(a.name) + " ")]), i("i", {
+          staticClass: "el-icon-close",
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handleRemove(a);
+            }
+          }
+        })], 1) : i("span", {
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handlePreview(a);
+            }
+          }
+        }, [i("a", {
+          staticClass: "el-upload-list__item-name"
+        }, [i("i", {
+          staticClass: "el-icon-document"
+        }), t._v(" " + t._s(a.name) + " ")]), t.disabled ? t._e() : i("i", {
+          staticClass: "el-icon-close",
+          on: {
+            click: function(n) {
+              return n.stopPropagation(), t.handleRemove(a);
+            }
+          }
+        })])];
+      }
+    }], null, !0)
+  }, [t.listType === "picture-card" ? [i("i", {
+    staticClass: "el-icon-plus"
+  })] : t.listType === "picture-img" ? [t.$scopedSlots.default ? t._t("default", null, {
+    file: {
+      url: t.imgUrl
+    }
+  }) : [t.isMediaType(t.imgUrl) ? i(t.isMediaType(t.imgUrl), {
+    tag: "Component",
+    staticClass: "avue-upload__avatar",
+    attrs: {
+      src: t.imgUrl
+    },
+    on: {
+      mouseover: function(o) {
+        t.menu = !0;
+      }
+    }
+  }) : t.imgUrl ? i("i", {
+    staticClass: "avue-upload__avatar el-icon-document",
+    attrs: {
+      src: t.imgUrl
+    },
+    on: {
+      mouseover: function(o) {
+        t.menu = !0;
+      }
+    }
+  }) : i("i", {
+    staticClass: "el-icon-plus avue-upload__avatar"
+  }), t.menu ? i("div", {
+    staticClass: "el-upload-list__item-actions avue-upload__menu",
+    on: {
+      mouseover: function(o) {
+        t.menu = !0;
+      },
+      mouseout: function(o) {
+        t.menu = !1;
+      },
+      click: function(o) {
+        return o.stopPropagation(), function() {
+          return !1;
+        }.apply(null, arguments);
+      }
+    }
+  }, [i("i", {
+    staticClass: "el-icon-zoom-in",
+    on: {
+      click: function(o) {
+        return o.stopPropagation(), t.handlePreview({
+          url: t.imgUrl
+        });
+      }
+    }
+  }), t.disabled ? t._e() : i("i", {
+    staticClass: "el-icon-delete",
+    on: {
+      click: function(o) {
+        return o.stopPropagation(), t.handleDelete(t.imgUrl);
+      }
+    }
+  })]) : t._e()]] : t.dragFile ? [i("i", {
+    staticClass: "el-icon-upload"
+  }), i("div", {
+    staticClass: "el-upload__text"
+  }, [i("em", [t._v(t._s(t.fileText || "上传"))])])] : [i("ElButton", {
+    attrs: {
+      icon: "el-icon-upload",
+      size: t.size,
+      type: "primary"
+    }
+  }, [t._v(" " + t._s(t.fileText || "上传") + " ")])], i("div", {
+    staticClass: "el-upload__tip",
+    attrs: {
+      slot: "tip"
+    },
+    domProps: {
+      innerHTML: t._s(t.tip)
+    },
+    slot: "tip"
+  })], 2)], 1);
+}, V = [];
+function b(t, e = "") {
+  return e.match(/(^http:\/\/|^https:\/\/|^\/\/|data:image\/)/) ? e : t + e;
+}
+const H = {
+  name: "FyUpload",
+  mixins: [j, z],
+  props: {
+    qiniu: Object,
+    ali: Object,
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    showFileList: {
+      type: Boolean,
+      default: !0
+    },
+    fileText: String,
+    fileType: {
+      type: String
+    },
+    oss: {
+      type: String
+    },
+    limit: {
+      type: Number
+    },
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    accept: {
+      type: [String, Array],
+      default: ""
+    },
+    canvasOption: {
+      type: Object,
+      default: () => ({})
+    },
+    cropperOption: {
+      type: Object,
+      default: () => ({})
+    },
+    fileSize: {
+      type: Number
+    },
+    dragFile: {
+      type: Boolean,
+      default: !1
+    },
+    drag: {
+      type: Boolean,
+      default: !1
+    },
+    loadText: {
+      type: String,
+      default: "Loading..."
+    },
+    action: {
+      type: String,
+      default: ""
+    },
+    uploadBefore: Function,
+    uploadAfter: Function,
+    uploadDelete: Function,
+    uploadPreview: Function,
+    uploadError: Function,
+    uploadExceed: Function,
+    httpRequest: Function
+  },
+  data() {
+    return {
+      res: "",
+      loading: !1,
+      menu: !1,
+      reload: Math.random()
+    };
+  },
+  computed: {
+    isObject() {
+      return typeof this.text[0] == "object";
+    },
+    acceptList() {
+      return Array.isArray(this.accept) ? this.accept.join(",") : this.accept;
+    },
+    homeUrl() {
+      return this.propsHttp.home || "";
+    },
+    fileName() {
+      return this.propsHttp.fileName || "file";
+    },
+    isAliOss() {
+      return this.oss === "ali";
+    },
+    isQiniuOss() {
+      return this.oss === "qiniu";
+    },
+    isPictureImg() {
+      return this.listType === "picture-img";
+    },
+    //单个头像图片
+    imgUrl() {
+      return x(this.text) ? null : b(this.homeUrl, this.text[0]);
+    },
+    fileList() {
+      let t = [];
+      return (this.text || []).forEach((e, i) => {
+        if (e) {
+          let o = this.isObject ? e[this.labelKey] : e.substring(e.lastIndexOf("/") + 1), a = this.isObject ? e[this.valueKey] : e;
+          a = b(this.homeUrl, a), t.push({
+            uid: i + "",
+            status: "done",
+            type: this.isMediaType(a),
+            name: o,
+            url: a
+          });
+        }
+      }), t;
+    }
+  },
+  mounted() {
+    this.drag && this.setSort();
+  },
+  methods: {
+    isMediaType(t) {
+      return w(t, this.fileType);
+    },
+    setSort() {
+      if (!window.Sortable) {
+        S.logs("Sortable");
+        return;
+      }
+      const t = this.$el.querySelectorAll(".avue-upload > ul")[0];
+      window.Sortable.create(t, {
+        animation: 100,
+        onEnd: (e) => {
+          const i = this.text.splice(e.oldIndex, 1)[0];
+          this.text.splice(e.newIndex, 0, i), this.reload = Math.random(), this.$nextTick(() => this.setSort());
+        }
+      });
+    },
+    handleSuccess(t) {
+      if (this.isPictureImg)
+        this.text.splice(0, 1, t[this.urlKey]);
+      else if (this.isObject) {
+        let e = {};
+        e[this.labelKey] = t[this.nameKey], e[this.valueKey] = t[this.urlKey], this.text.push(e);
+      } else
+        this.text.push(t[this.urlKey]);
+    },
+    handleRemove(t, e) {
+      this.beforeRemove(t).then(() => {
+        this.delete(t);
+      });
+    },
+    handleError(t) {
+      this.uploadError && this.uploadError(t, this.column);
+    },
+    delete(t) {
+      (this.text || []).forEach((e, i) => {
+        let o = this.isObject ? e[this.valueKey] : e;
+        b(this.homeUrl, o) === t.url && this.text.splice(i, 1);
+      });
+    },
+    show(t) {
+      this.loading = !1, this.res = t || this.res, this.handleSuccess(this.res);
+    },
+    hide(t) {
+      this.loading = !1, t && this.handleError(t);
+    },
+    handleFileChange(t, e) {
+      e.splice(e.length - 1, 1);
+    },
+    httpUpload(t) {
+      if (typeof this.httpRequest == "function") {
+        this.httpRequest(t);
+        return;
+      }
+      this.loading = !0;
+      let e = t.file;
+      const i = e.size / 1024;
+      if (!x(i) && i > this.fileSize) {
+        this.hide("文件太大不符合");
+        return;
+      }
+      const o = Object.assign(this.headers, { "Content-Type": "multipart/form-data" });
+      let a = {}, n = {}, l = new FormData();
+      const d = () => {
+        const p = (v) => {
+          let g = this.action;
+          for (let r in this.data)
+            l.append(r, this.data[r]);
+          const _ = v || e;
+          if (l.append(this.fileName, _), this.isQiniuOss) {
+            if (!window.CryptoJS) {
+              S.logs("CryptoJS"), this.hide();
+              return;
+            }
+            a = this.qiniu || this.$AVUE.qiniu;
+            const r = L(a.AK, a.SK, {
+              scope: a.scope,
+              deadline: new Date().getTime() + a.deadline * 3600
+            });
+            l.append("token", r), g = a.bucket;
+          } else if (this.isAliOss) {
+            if (!window.OSS) {
+              S.logs("AliOSS"), this.hide();
+              return;
+            }
+            a = this.ali || this.$AVUE.ali, n = M(a);
+          }
+          (() => this.isAliOss ? n.put(_.name, _, {
+            headers: this.headers
+          }) : this.$axios.post(g, l, { headers: o }))().then((r) => {
+            this.res = {}, this.isQiniuOss && (r.data.key = a.url + r.data.key), this.res = D(this.isAliOss ? r : r.data, this.resKey), typeof this.uploadAfter == "function" ? this.uploadAfter(this.res, this.show, this.hide, this.column) : this.show();
+          }).catch((r) => {
+            this.hide(r);
+          });
+        };
+        typeof this.uploadBefore == "function" ? this.uploadBefore(e, p, this.hide, this.column) : p();
+      };
+      if (w(e.name) != "img") {
+        d();
+        return;
+      }
+      const y = () => {
+        x(this.canvasOption) ? d() : $(e, this.canvasOption, (p) => {
+          e = p, d();
+        });
+      };
+      x(this.cropperOption) ? y() : A(e, (p) => {
+        let v = Object.assign(this.cropperOption, {
+          img: p,
+          type: "file",
+          callback: (g) => {
+            e = g, y();
+          },
+          cancel: () => {
+            this.loading = !1;
+          }
+        });
+        this.$ImageCropper(v);
+      });
+    },
+    handleExceed(t, e) {
+      this.uploadExceed && this.uploadExceed(this.limit, t, e, this.column);
+    },
+    handlePreview(t) {
+      const e = () => {
+        let i = this.fileList.findIndex((o) => o.url === t.url);
+        this.$ImagePreview(this.fileList, i);
+      };
+      typeof this.uploadPreview == "function" ? this.uploadPreview(t, this.column, e) : e();
+    },
+    handleDelete(t) {
+      this.beforeRemove(t).then(() => {
+        this.text = [], this.menu = !1;
+      });
+    },
+    beforeRemove(t) {
+      return typeof this.uploadDelete == "function" ? this.uploadDelete(t, this.column) : Promise.resolve();
+    }
+  }
+}, F = {};
+var J = /* @__PURE__ */ I(
+  H,
+  q,
+  V,
+  !1,
+  Q,
+  null,
+  null,
+  null
+);
+function Q(t) {
+  for (let e in F)
+    this[e] = F[e];
+}
+const Z = /* @__PURE__ */ function() {
+  return J.exports;
+}();
+export {
+  Z as default
+};

package/dist/components/fy-upload/style.css

@@ -0,0 +1 @@
+.avue-upload--upload .el-upload,.avue-upload--upload .el-upload__tip{display:none}.avue-upload--upload .el-upload--picture-img{display:inline-block}.avue-upload--upload .el-upload-list{margin-top:-6px}.avue-upload--list .el-upload{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avue-upload--list .el-upload:hover{border-color:#409eff}.avue-upload__dialog .el-dialog__header{display:none}.avue-upload__dialog .el-dialog__body{padding:10px;display:flex;justify-content:center}.avue-upload__menu{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1024}.avue-upload__menu i{color:#fff;margin:0 8px;font-size:20px}.avue-upload__avatar{font-size:28px;color:#8c939d;width:148px;height:148px;line-height:148px;text-align:center;display:block}