@nutui/nutui 3.1.6 → 3.1.7

package/dist/packages/_es/Uploader.js

@@ -0,0 +1,400 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createCommentVNode, renderList, createElementVNode, createBlock, toDisplayString, createVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+class UploadOptions {
+  constructor() {
+    __publicField(this, "url", "");
+    __publicField(this, "name", "file");
+    __publicField(this, "formData");
+    __publicField(this, "method", "post");
+    __publicField(this, "xhrState", 200);
+    __publicField(this, "timeout", 30 * 1e3);
+    __publicField(this, "headers", {});
+    __publicField(this, "withCredentials", false);
+    __publicField(this, "onStart");
+    __publicField(this, "onProgress");
+    __publicField(this, "onSuccess");
+    __publicField(this, "onFailure");
+  }
+}
+class Uploader {
+  constructor(options) {
+    __publicField(this, "options");
+    this.options = options;
+  }
+  upload() {
+    var _a;
+    const options = this.options;
+    const xhr = new XMLHttpRequest();
+    xhr.timeout = options.timeout;
+    if (xhr.upload) {
+      xhr.upload.addEventListener("progress", (e) => {
+        var _a2;
+        (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, e, options);
+      }, false);
+      xhr.onreadystatechange = () => {
+        var _a2, _b;
+        if (xhr.readyState === 4) {
+          if (xhr.status === options.xhrState) {
+            (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, xhr.responseText, options);
+          } else {
+            (_b = options.onFailure) == null ? void 0 : _b.call(options, xhr.responseText, options);
+          }
+        }
+      };
+      xhr.withCredentials = options.withCredentials;
+      xhr.open(options.method, options.url, true);
+      for (const [key, value] of Object.entries(options.headers)) {
+        xhr.setRequestHeader(key, value);
+      }
+      (_a = options.onStart) == null ? void 0 : _a.call(options, options);
+      xhr.send(options.formData);
+    } else {
+      console.warn("\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 XMLHttpRequest");
+    }
+  }
+  uploadTaro(filePath, uploadFile) {
+    var _a;
+    const options = this.options;
+    const uploadTask = uploadFile({
+      url: options.url,
+      filePath,
+      header: __spreadValues({
+        "Content-Type": "multipart/form-data"
+      }, options.headers),
+      formData: options.formData,
+      name: options.name,
+      success(response) {
+        var _a2, _b;
+        if (options.xhrState === response.statusCode) {
+          (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
+        } else {
+          (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
+        }
+      },
+      fail(e) {
+        var _a2;
+        (_a2 = options.onFailure) == null ? void 0 : _a2.call(options, e, options);
+      }
+    });
+    (_a = options.onStart) == null ? void 0 : _a.call(options, options);
+    uploadTask.progress((res) => {
+      var _a2;
+      (_a2 = options.onProgress) == null ? void 0 : _a2.call(options, res, options);
+    });
+  }
+}
+const { componentName, create } = createComponent("uploader");
+class FileItem {
+  constructor() {
+    __publicField(this, "status", "ready");
+    __publicField(this, "uid", new Date().getTime().toString());
+    __publicField(this, "name");
+    __publicField(this, "url");
+    __publicField(this, "type");
+    __publicField(this, "formData", new FormData());
+  }
+}
+const _sfc_main = create({
+  props: {
+    name: { type: String, default: "file" },
+    url: { type: String, default: "" },
+    timeout: { type: [Number, String], default: 1e3 * 30 },
+    fileList: { type: Array, default: () => [] },
+    isPreview: { type: Boolean, default: true },
+    isDeletable: { type: Boolean, default: true },
+    method: { type: String, default: "post" },
+    capture: { type: Boolean, default: false },
+    maximize: { type: [Number, String], default: Number.MAX_VALUE },
+    maximum: { type: [Number, String], default: 1 },
+    clearInput: { type: Boolean, default: false },
+    accept: { type: String, default: "*" },
+    headers: { type: Object, default: {} },
+    data: { type: Object, default: {} },
+    uploadIcon: { type: String, default: "photograph" },
+    uploadIconSize: { type: [String, Number], default: "" },
+    xhrState: { type: [Number, String], default: 200 },
+    withCredentials: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    beforeUpload: {
+      type: Function,
+      default: null
+    },
+    beforeDelete: {
+      type: Function,
+      default: (file, files) => {
+        return true;
+      }
+    },
+    onChange: { type: Function }
+  },
+  emits: [
+    "start",
+    "progress",
+    "oversize",
+    "success",
+    "failure",
+    "change",
+    "delete",
+    "update:fileList"
+  ],
+  setup(props, { emit }) {
+    const fileList = reactive(props.fileList);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const clearInput = (el) => {
+      el.value = "";
+    };
+    const executeUpload = (fileItem) => {
+      const uploadOption = new UploadOptions();
+      uploadOption.url = props.url;
+      for (const [key, value] of Object.entries(props.data)) {
+        fileItem.formData.append(key, value);
+      }
+      uploadOption.formData = fileItem.formData;
+      uploadOption.timeout = props.timeout * 1;
+      uploadOption.method = props.method;
+      uploadOption.xhrState = props.xhrState;
+      uploadOption.headers = props.headers;
+      uploadOption.withCredentials = props.withCredentials;
+      uploadOption.onStart = (option) => {
+        fileItem.status = "ready";
+        emit("start", option);
+      };
+      uploadOption.onProgress = (e, option) => {
+        fileItem.status = "uploading";
+        emit("progress", { e, option });
+      };
+      uploadOption.onSuccess = (responseText, option) => {
+        fileItem.status = "success";
+        emit("success", {
+          responseText,
+          option
+        });
+        emit("update:fileList", fileList);
+      };
+      uploadOption.onFailure = (responseText, option) => {
+        fileItem.status = "error";
+        emit("failure", {
+          responseText,
+          option
+        });
+      };
+      new Uploader(uploadOption).upload();
+    };
+    const readFile = (files) => {
+      files.forEach((file) => {
+        const formData = new FormData();
+        formData.append(props.name, file);
+        const fileItem = reactive(new FileItem());
+        fileItem.name = file.name;
+        fileItem.status = "uploading";
+        fileItem.type = file.type;
+        fileItem.formData = formData;
+        executeUpload(fileItem);
+        if (props.isPreview && file.type.includes("image")) {
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            fileItem.url = event.target.result;
+            fileList.push(fileItem);
+          };
+          reader.readAsDataURL(file);
+        } else {
+          fileList.push(fileItem);
+        }
+      });
+    };
+    const filterFiles = (files) => {
+      const maximum = props.maximum * 1;
+      const maximize = props.maximize * 1;
+      const oversizes = new Array();
+      files = files.filter((file) => {
+        if (file.size > maximize) {
+          oversizes.push(file);
+          return false;
+        } else {
+          return true;
+        }
+      });
+      if (oversizes.length) {
+        emit("oversize", oversizes);
+      }
+      if (files.length > maximum) {
+        files.splice(maximum - 1, files.length - maximum);
+      }
+      return files;
+    };
+    const onDelete = (file, index2) => {
+      if (props.beforeDelete(file, fileList)) {
+        fileList.splice(index2, 1);
+        emit("delete", {
+          file,
+          fileList
+        });
+      } else {
+        console.log("\u7528\u6237\u963B\u6B62\u4E86\u5220\u9664\uFF01");
+      }
+    };
+    const onChange = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      const $el = event.target;
+      let { files } = $el;
+      if (props.beforeUpload) {
+        props.beforeUpload(files).then((f) => {
+          const _files = filterFiles(new Array().slice.call(f));
+          readFile(_files);
+        });
+      } else {
+        const _files = filterFiles(new Array().slice.call(files));
+        readFile(_files);
+      }
+      emit("change", {
+        fileList,
+        event
+      });
+      if (props.clearInput) {
+        clearInput($el);
+      }
+    };
+    return {
+      onChange,
+      onDelete,
+      fileList,
+      classes
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-uploader__slot"
+};
+const _hoisted_2 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_3 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_4 = { class: "nut-uploader__preview-img" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = {
+  key: 2,
+  class: "tips"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "nut-uploader__upload"
+};
+const _hoisted_8 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_9 = ["accept", "multiple", "name", "disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default"),
+      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.capture ? (openBlock(), createElementBlock("input", {
+          key: 0,
+          class: "nut-uploader__input",
+          type: "file",
+          capture: "camera",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_2)) : (openBlock(), createElementBlock("input", {
+          key: 1,
+          class: "nut-uploader__input",
+          type: "file",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_3))
+      ], 64)) : createCommentVNode("", true)
+    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index2) => {
+        return openBlock(), createElementBlock("view", {
+          class: "nut-uploader__preview",
+          key: item.uid
+        }, [
+          createElementVNode("view", _hoisted_4, [
+            _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
+              key: 0,
+              color: "rgba(0,0,0,0.6)",
+              onClick: ($event) => _ctx.onDelete(item, index2),
+              class: "close",
+              name: "circle-close"
+            }, null, 8, ["onClick"])) : createCommentVNode("", true),
+            item.type.includes("image") && item.url ? (openBlock(), createElementBlock("img", {
+              key: 1,
+              class: "nut-uploader__preview-img__c",
+              src: item.url
+            }, null, 8, _hoisted_5)) : createCommentVNode("", true),
+            item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(item.status), 1)) : createCommentVNode("", true)
+          ])
+        ]);
+      }), 128)),
+      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", _hoisted_7, [
+        createVNode(_component_nut_icon, {
+          size: _ctx.uploadIconSize,
+          color: "#808080",
+          name: _ctx.uploadIcon
+        }, null, 8, ["size", "name"]),
+        _ctx.capture ? (openBlock(), createElementBlock("input", {
+          key: 0,
+          class: "nut-uploader__input",
+          type: "file",
+          capture: "camera",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_8)) : (openBlock(), createElementBlock("input", {
+          key: 1,
+          class: "nut-uploader__input",
+          type: "file",
+          accept: _ctx.accept,
+          multiple: _ctx.multiple,
+          name: _ctx.name,
+          disabled: _ctx.disabled,
+          onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+        }, null, 40, _hoisted_9))
+      ])) : createCommentVNode("", true)
+    ], 64))
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { FileItem, index as default };