@web-utils/component 2.7.36 → 2.8.0

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

@@ -1,760 +0,0 @@
-import { p as props, e as event } from "../../chunks/event.812c361c.js";
-import { z as dataURLtoFile, i as isMediaType, g as getAsVal } from "../../chunks/util.b0d0b0ad.js";
-import { p as packages } from "../../chunks/packages.c4ea639d.js";
-import { isBlank } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-let canvas;
-let ctx;
-const configDefault = {
-  width: 200,
-  height: 200
-};
-const config = {
-  text: "avueJS",
-  // 文字
-  fontFamily: "microsoft yahei",
-  // 字体
-  color: "#999",
-  // 颜色
-  fontSize: 16,
-  // 大小
-  opacity: 100,
-  // 透明度
-  bottom: 10,
-  // 下边位置
-  right: 10,
-  // 右边位置
-  ratio: 1
-  // 压缩比
-};
-function fileToBase64(file, callback) {
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = function(e) {
-    callback(e.target.result);
-  };
-}
-function detailImg(file, option = {}, callback) {
-  const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
-  initParams();
-  fileToBase64(file, initImg);
-  function initParams() {
-    config.text = text || config.text;
-    config.fontFamily = fontFamily || config.fontFamily;
-    config.color = color || config.color;
-    config.fontSize = fontSize || config.fontSize;
-    config.opacity = opacity || config.opacity;
-    config.bottom = bottom || config.bottom;
-    config.right = right || config.right;
-    config.ratio = ratio || config.ratio;
-  }
-  function initImg(data) {
-    const img = new Image();
-    img.src = data;
-    img.onload = function() {
-      const width = img.width;
-      const height = img.height;
-      cretedCanvas(width, height);
-      ctx.drawImage(img, 0, 0, width, height);
-      setText(width, height);
-      const base64 = document.getElementById("canvas").toDataURL(file.type, config.ratio);
-      const result = dataURLtoFile(base64, file.name);
-      callback && callback(result);
-    };
-  }
-  function cretedCanvas(width, height) {
-    canvas = document.getElementById("canvas");
-    if (canvas === null) {
-      canvas = document.createElement("canvas");
-      canvas.id = "canvas";
-      canvas.className = "avue-canvas";
-      document.body.appendChild(canvas);
-    }
-    ctx = canvas.getContext("2d");
-    canvas.width = width;
-    canvas.height = height;
-  }
-  function setText(width, height) {
-    const txt = config.text;
-    const param = calcParam(txt, width, height);
-    ctx.font = `${param.fontSize}px ${config.fontFamily}`;
-    ctx.fillStyle = config.color;
-    ctx.globalAlpha = config.opacity / 100;
-    ctx.fillText(txt, param.x, param.y);
-  }
-  function calcParam(txt, width, height) {
-    let x, y;
-    const calcFontSize = config.fontSize / configDefault.width;
-    const fontSize2 = calcFontSize * width;
-    if (config.bottom) {
-      y = configDefault.height - config.bottom;
-    } else {
-      y = config.top;
-    }
-    if (config.right) {
-      x = configDefault.width - config.right;
-    } else {
-      x = config.left;
-    }
-    ctx.font = `${config.fontSize}px ${config.fontFamily}`;
-    const txtWidth = Number(ctx.measureText(txt).width);
-    x = x - txtWidth;
-    const calcPosX = x / configDefault.width;
-    const calcPosY = y / configDefault.height;
-    x = calcPosX * width;
-    y = calcPosY * height;
-    return {
-      x,
-      y,
-      fontSize: fontSize2
-    };
-  }
-}
-const getToken = (accessKey, secretKey, putPolicy) => {
-  const put_policy = JSON.stringify(putPolicy);
-  window.__ENV__ === "development" && console && console.log("put_policy = ", put_policy);
-  const encoded = base64encode(utf16to8(put_policy));
-  window.__ENV__ === "development" && console && console.log("encoded = ", encoded);
-  const hash = CryptoJS.HmacSHA1(encoded, secretKey);
-  const encoded_signed = hash.toString(CryptoJS.enc.Base64);
-  window.__ENV__ === "development" && console && console.log("encoded_signed=", encoded_signed);
-  const upload_token = `${accessKey}:${safe64(encoded_signed)}:${encoded}`;
-  window.__ENV__ === "development" && console && console.log("upload_token=", upload_token);
-  return upload_token;
-};
-function utf16to8(str) {
-  let out, i, c;
-  out = "";
-  const len = str.length;
-  for (i = 0; i < len; i++) {
-    c = str.charCodeAt(i);
-    if (c >= 1 && c <= 127) {
-      out += str.charAt(i);
-    } else if (c > 2047) {
-      out += String.fromCharCode(224 | c >> 12 & 15);
-      out += String.fromCharCode(128 | c >> 6 & 63);
-      out += String.fromCharCode(128 | c >> 0 & 63);
-    } else {
-      out += String.fromCharCode(192 | c >> 6 & 31);
-      out += String.fromCharCode(128 | c >> 0 & 63);
-    }
-  }
-  return out;
-}
-const base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
-function base64encode(str) {
-  let out, i, len;
-  let c1, c2, c3;
-  len = str.length;
-  i = 0;
-  out = "";
-  while (i < len) {
-    c1 = str.charCodeAt(i++) & 255;
-    if (i == len) {
-      out += base64EncodeChars.charAt(c1 >> 2);
-      out += base64EncodeChars.charAt((c1 & 3) << 4);
-      out += "==";
-      break;
-    }
-    c2 = str.charCodeAt(i++);
-    if (i == len) {
-      out += base64EncodeChars.charAt(c1 >> 2);
-      out += base64EncodeChars.charAt((c1 & 3) << 4 | (c2 & 240) >> 4);
-      out += base64EncodeChars.charAt((c2 & 15) << 2);
-      out += "=";
-      break;
-    }
-    c3 = str.charCodeAt(i++);
-    out += base64EncodeChars.charAt(c1 >> 2);
-    out += base64EncodeChars.charAt((c1 & 3) << 4 | (c2 & 240) >> 4);
-    out += base64EncodeChars.charAt((c2 & 15) << 2 | (c3 & 192) >> 6);
-    out += base64EncodeChars.charAt(c3 & 63);
-  }
-  return out;
-}
-const safe64 = function(base64) {
-  base64 = base64.replace(/\+/g, "-");
-  base64 = base64.replace(/\//g, "_");
-  return base64;
-};
-const getClient = (params) => {
-  const client = new OSS(params);
-  return client;
-};
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    directives: [{
-      name: "loading",
-      rawName: "v-loading.lock",
-      value: _vm.loading,
-      expression: "loading",
-      modifiers: {
-        "lock": true
-      }
-    }],
-    staticClass: "avue-upload",
-    attrs: {
-      "element-loading-text": _vm.loadText
-    }
-  }, [_c("ElUpload", {
-    key: _vm.reload,
-    class: {
-      "avue-upload--list": _vm.listType === "picture-img",
-      "avue-upload--upload": _vm.disabled
-    },
-    attrs: {
-      "action": _vm.action,
-      "on-remove": _vm.handleRemove,
-      "accept": _vm.acceptList,
-      "before-remove": _vm.beforeRemove,
-      "multiple": _vm.multiple,
-      "on-preview": _vm.handlePreview,
-      "limit": _vm.limit,
-      "http-request": _vm.httpUpload,
-      "readonly": _vm.readonly,
-      "drag": _vm.dragFile,
-      "show-file-list": _vm.isPictureImg ? false : _vm.showFileList,
-      "list-type": _vm.listType,
-      "on-change": _vm.handleFileChange,
-      "on-exceed": _vm.handleExceed,
-      "disabled": _vm.disabled,
-      "file-list": _vm.fileList
-    },
-    nativeOn: {
-      "click": function($event) {
-        return _vm.handleClick.apply(null, arguments);
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "tip",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "el-upload__tip",
-          domProps: {
-            "innerHTML": _vm._s(_vm.tip)
-          }
-        })];
-      },
-      proxy: true
-    }, {
-      key: "file",
-      fn: function(_ref) {
-        var file = _ref.file;
-        return [_vm.$scopedSlots.default ? _vm._t("default", null, {
-          "file": file
-        }) : _vm.listType === "picture-card" ? _c("span", [_vm.isMediaType(file.url) ? _c(file.type, {
-          tag: "Component",
-          staticClass: "el-upload-list__item-thumbnail",
-          attrs: {
-            "src": file.url
-          }
-        }) : _c("i", {
-          staticClass: "avue-upload__avatar el-icon-document"
-        }), _c("span", {
-          staticClass: "el-upload-list__item-actions"
-        }, [_c("span", {
-          staticClass: "el-upload-list__item-preview"
-        }, [_c("i", {
-          staticClass: "el-icon-zoom-in",
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handlePreview(file);
-            }
-          }
-        })]), _c("span", {
-          staticClass: "el-upload-list__item-delete"
-        }, [!_vm.disabled ? _c("i", {
-          staticClass: "el-icon-delete",
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handleRemove(file);
-            }
-          }
-        }) : _vm._e()])])], 1) : _vm.listType === "picture" ? _c("span", {
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handlePreview(file);
-            }
-          }
-        }, [_c(file.type, {
-          tag: "Component",
-          staticClass: "el-upload-list__item-thumbnail",
-          attrs: {
-            "src": file.url
-          }
-        }), _c("a", {
-          staticClass: "el-upload-list__item-name"
-        }, [_c("i", {
-          staticClass: "el-icon-document"
-        }), _vm._v(" " + _vm._s(file.name) + " ")]), _c("i", {
-          staticClass: "el-icon-close",
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handleRemove(file);
-            }
-          }
-        })], 1) : _c("span", {
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handlePreview(file);
-            }
-          }
-        }, [_c("a", {
-          staticClass: "el-upload-list__item-name"
-        }, [_c("i", {
-          staticClass: "el-icon-document"
-        }), _vm._v(" " + _vm._s(file.name) + " ")]), !_vm.disabled ? _c("i", {
-          staticClass: "el-icon-close",
-          on: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.handleRemove(file);
-            }
-          }
-        }) : _vm._e()])];
-      }
-    }], null, true)
-  }, [_vm.listType === "picture-card" ? [_c("i", {
-    staticClass: "el-icon-plus"
-  })] : _vm.listType === "picture-img" ? [_vm.$scopedSlots.default ? _vm._t("default", null, {
-    "file": {
-      url: _vm.imgUrl
-    }
-  }) : [_vm.isMediaType(_vm.imgUrl) ? _c(_vm.isMediaType(_vm.imgUrl), {
-    tag: "Component",
-    staticClass: "avue-upload__avatar",
-    attrs: {
-      "src": _vm.imgUrl
-    },
-    on: {
-      "mouseover": function($event) {
-        _vm.menu = true;
-      }
-    }
-  }) : _vm.imgUrl ? _c("i", {
-    staticClass: "avue-upload__avatar el-icon-document",
-    on: {
-      "mouseover": function($event) {
-        _vm.menu = true;
-      }
-    }
-  }) : _c("i", {
-    staticClass: "el-icon-plus avue-upload__avatar"
-  }), _vm.menu ? _c("div", {
-    staticClass: "el-upload-list__item-actions avue-upload__menu",
-    on: {
-      "mouseover": function($event) {
-        _vm.menu = true;
-      },
-      "mouseout": function($event) {
-        _vm.menu = false;
-      },
-      "click": function($event) {
-        $event.stopPropagation();
-      }
-    }
-  }, [_c("i", {
-    staticClass: "el-icon-zoom-in",
-    on: {
-      "click": function($event) {
-        $event.stopPropagation();
-        return _vm.handlePreview({
-          url: _vm.imgUrl
-        });
-      }
-    }
-  }), !_vm.disabled ? _c("i", {
-    staticClass: "el-icon-delete",
-    on: {
-      "click": function($event) {
-        $event.stopPropagation();
-        return _vm.handleDelete(_vm.imgUrl);
-      }
-    }
-  }) : _vm._e()]) : _vm._e()]] : _vm.dragFile ? [_c("i", {
-    staticClass: "el-icon-upload"
-  }), _c("div", {
-    staticClass: "el-upload__text"
-  }, [_c("em", [_vm._v(_vm._s(_vm.fileText || "上传"))])])] : [_c("ElButton", {
-    attrs: {
-      "icon": "el-icon-upload",
-      "size": _vm.size,
-      "type": "primary"
-    }
-  }, [_vm._v(" " + _vm._s(_vm.fileText || "上传") + " ")])]], 2)], 1);
-};
-var staticRenderFns = [];
-const FyUpload_vue_vue_type_style_index_0_lang = "";
-function getFileUrl(home, uri = "") {
-  return uri.match(/(^http:\/\/|^https:\/\/|^\/\/|data:image\/)/) ? uri : home + uri;
-}
-const __vue2_script = {
-  name: "FyUpload",
-  mixins: [props, event],
-  props: {
-    qiniu: Object,
-    ali: Object,
-    data: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    fileText: String,
-    fileType: {
-      type: String
-    },
-    oss: {
-      type: String
-    },
-    limit: {
-      type: Number
-    },
-    headers: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    accept: {
-      type: [String, Array],
-      default: ""
-    },
-    canvasOption: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    cropperOption: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    fileSize: {
-      type: Number
-    },
-    dragFile: {
-      type: Boolean,
-      default: false
-    },
-    drag: {
-      type: Boolean,
-      default: false
-    },
-    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: false,
-      menu: false,
-      reload: Math.random()
-    };
-  },
-  computed: {
-    isObject() {
-      const obj = this.text[0];
-      return typeof obj === "object";
-    },
-    acceptList() {
-      if (Array.isArray(this.accept)) {
-        return this.accept.join(",");
-      }
-      return 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() {
-      if (!isBlank(this.text)) {
-        return getFileUrl(this.homeUrl, this.text[0]);
-      }
-      return null;
-    },
-    fileList() {
-      const list = [];
-      (this.text || []).forEach((ele, index) => {
-        if (ele) {
-          const name = this.isObject ? ele[this.labelKey] : ele.substring(ele.lastIndexOf("/") + 1);
-          let url = this.isObject ? ele[this.valueKey] : ele;
-          url = getFileUrl(this.homeUrl, url);
-          list.push({
-            uid: `${index}`,
-            status: "done",
-            type: this.isMediaType(url),
-            name,
-            url
-          });
-        }
-      });
-      return list;
-    }
-  },
-  mounted() {
-    if (this.drag) {
-      this.setSort();
-    }
-  },
-  methods: {
-    isMediaType(url) {
-      return isMediaType(url, this.fileType);
-    },
-    setSort() {
-      if (!window.Sortable) {
-        packages.logs("Sortable");
-        return;
-      }
-      const el = this.$el.querySelectorAll(".avue-upload > ul")[0];
-      window.Sortable.create(el, {
-        animation: 100,
-        onEnd: (evt) => {
-          const targetRow = this.text.splice(evt.oldIndex, 1)[0];
-          this.text.splice(evt.newIndex, 0, targetRow);
-          this.reload = Math.random();
-          this.$nextTick(() => this.setSort());
-        }
-      });
-    },
-    handleSuccess(file) {
-      if (this.isPictureImg) {
-        this.text.splice(0, 1, file[this.urlKey]);
-      } else if (this.isObject) {
-        const obj = {};
-        obj[this.labelKey] = file[this.nameKey];
-        obj[this.valueKey] = file[this.urlKey];
-        this.text.push(obj);
-      } else {
-        this.text.push(file[this.urlKey]);
-      }
-    },
-    handleRemove(file) {
-      this.beforeRemove(file).then(() => {
-        this.delete(file);
-      });
-    },
-    handleError(error) {
-      this.uploadError && this.uploadError(error, this.column);
-    },
-    delete(file) {
-      (this.text || []).forEach((ele, index) => {
-        const url = this.isObject ? ele[this.valueKey] : ele;
-        if (getFileUrl(this.homeUrl, url) === file.url) {
-          this.text.splice(index, 1);
-        }
-      });
-    },
-    show(data) {
-      this.loading = false;
-      this.res = data || this.res;
-      this.handleSuccess(this.res);
-    },
-    hide(msg) {
-      this.loading = false;
-      if (msg)
-        this.handleError(msg);
-    },
-    handleFileChange(file, fileList) {
-      fileList.splice(fileList.length - 1, 1);
-    },
-    httpUpload(config2) {
-      if (typeof this.httpRequest === "function") {
-        this.httpRequest(config2);
-        return;
-      }
-      this.loading = true;
-      let file = config2.file;
-      const fileSize = file.size / 1024;
-      if (!isBlank(fileSize) && fileSize > this.fileSize) {
-        this.hide("文件太大不符合");
-        return;
-      }
-      const headers = Object.assign(this.headers, { "Content-Type": "multipart/form-data" });
-      let ossConfig = {};
-      let client = {};
-      const param = new FormData();
-      const done = () => {
-        const callback = (newFile) => {
-          let url = this.action;
-          for (const o in this.data) {
-            param.append(o, this.data[o]);
-          }
-          const uploadFile = newFile || file;
-          param.append(this.fileName, uploadFile);
-          if (this.isQiniuOss) {
-            if (!window.CryptoJS) {
-              packages.logs("CryptoJS");
-              this.hide();
-              return;
-            }
-            ossConfig = this.qiniu || this.$AVUE.qiniu;
-            const token = getToken(ossConfig.AK, ossConfig.SK, {
-              scope: ossConfig.scope,
-              deadline: new Date().getTime() + ossConfig.deadline * 3600
-            });
-            param.append("token", token);
-            url = ossConfig.bucket;
-          } else if (this.isAliOss) {
-            if (!window.OSS) {
-              packages.logs("AliOSS");
-              this.hide();
-              return;
-            }
-            ossConfig = this.ali || this.$AVUE.ali;
-            client = getClient(ossConfig);
-          }
-          (() => {
-            if (this.isAliOss) {
-              return client.put(uploadFile.name, uploadFile, {
-                headers: this.headers
-              });
-            } else {
-              return this.$axios.post(url, param, { headers });
-            }
-          })().then((res) => {
-            this.res = {};
-            if (this.isQiniuOss) {
-              res.data.key = ossConfig.url + res.data.key;
-            }
-            this.res = getAsVal(this.isAliOss ? res : res.data, this.resKey);
-            if (typeof this.uploadAfter === "function") {
-              this.uploadAfter(this.res, this.show, this.hide, this.column);
-            } else {
-              this.show();
-            }
-          }).catch((error) => {
-            this.hide(error);
-          });
-        };
-        if (typeof this.uploadBefore === "function") {
-          this.uploadBefore(file, callback, this.hide, this.column);
-        } else {
-          callback();
-        }
-      };
-      if (isMediaType(file.name) !== "img") {
-        done();
-        return;
-      }
-      const canvasDone = () => {
-        if (!isBlank(this.canvasOption)) {
-          detailImg(file, this.canvasOption, (res) => {
-            file = res;
-            done();
-          });
-        } else {
-          done();
-        }
-      };
-      if (!isBlank(this.cropperOption)) {
-        fileToBase64(file, (res) => {
-          const option = Object.assign(this.cropperOption, {
-            img: res,
-            type: "file",
-            callback: (res2) => {
-              file = res2;
-              canvasDone();
-            },
-            cancel: () => {
-              this.loading = false;
-            }
-          });
-          this.$ImageCropper(option);
-        });
-      } else {
-        canvasDone();
-      }
-    },
-    handleExceed(files, fileList) {
-      this.uploadExceed && this.uploadExceed(this.limit, files, fileList, this.column);
-    },
-    handlePreview(file) {
-      const callback = () => {
-        const index = this.fileList.findIndex((ele) => {
-          return ele.url === file.url;
-        });
-        this.$ImagePreview(this.fileList, index);
-      };
-      if (typeof this.uploadPreview === "function") {
-        this.uploadPreview(file, this.column, callback);
-      } else {
-        callback();
-      }
-    },
-    handleDelete(file) {
-      this.beforeRemove(file).then(() => {
-        this.text = [];
-        this.menu = false;
-      });
-    },
-    beforeRemove(file) {
-      if (typeof this.uploadDelete === "function") {
-        return this.uploadDelete(file, this.column);
-      } else {
-        return Promise.resolve();
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const FyUpload = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  FyUpload as default
-};