wot-design/lib/upload/index.js

Mobile UI components built on vue.js

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 109);
/******/ })
/************************************************************************/
/******/ ({

/***/ 0:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functioal component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}


/***/ }),

/***/ 1:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return isServer; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isSupportSticky; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getScrollTargetEvent; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return padZero; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return range; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return isEqual; });
/* unused harmony export bus */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getType; });
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);

var isServer = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer;
/**
 * judge if the browser is support sticky
 */

var isSupportSticky = function isSupportSticky() {
  var div = document.createElement('div');
  var style = 'display: none; position: -webkit-sticky; position: sticky';
  div.style.cssText = style;
  var body = document.body;
  body.appendChild(div);
  var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
  body.removeChild(div);
  div = null;
  return isSupport;
};
/**
 * get the overscroll parentNode
 * @param {*} element current node
 * @param {*} rootElement root node
 */

var getScrollTargetEvent = function getScrollTargetEvent(element) {
  var rootElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window;
  var currentNode = element;

  while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode !== rootElement && currentNode.nodeType === 1) {
    var overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;

    if (overflowY === 'auto' || overflowY === 'scroll') {
      return currentNode;
    }

    currentNode = currentNode.parentNode;
  }

  return rootElement;
};
var padZero = function padZero(number) {
  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
  number = number + '';

  while (number.length < length) {
    number = '0' + number;
  }

  return number;
};
var range = function range(value, min, max) {
  return Math.min(Math.max(value, min), max);
};
/** @description 比较数值是否相等 */

var isEqual = function isEqual(value1, value2) {
  if (value1 === value2) return true;
  if (!(value1 instanceof Array)) return false;
  if (!(value2 instanceof Array)) return false;
  if (value1.length !== value2.length) return false;

  for (var i = 0; i !== value1.length; ++i) {
    if (value1[i] !== value2[i]) return false;
  }

  return true;
};
var bus = new vue__WEBPACK_IMPORTED_MODULE_0___default.a();
/**
 * @description 获取目标原始类型
 * @param target 任意类型
 * @returns {string} type 数据类型
 */

function getType(target) {
  // 得到原生类型
  var typeStr = Object.prototype.toString.call(target); // 拿到类型值

  var type = typeStr.match(/\[object (\w+)\]/)[1]; // 类型值转小写并返回

  return type.toLowerCase();
}

/***/ }),

/***/ 109:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js
var defineProperty = __webpack_require__(5);
var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);

// CONCATENATED MODULE: ./packages/upload/src/utils.js
// 图片类型限制
function isImageUrl(url) {
  var IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
  return IMAGE_REGEXP.test(url);
}

function getBody(xhr) {
  var text = xhr.responseText || xhr.response;

  if (!text) {
    return text;
  }

  try {
    return JSON.parse(text);
  } catch (e) {
    return text;
  }
}
/**
 * @description 编辑报错信息
 * @param {String} action 上传服务器地址
 * @param {Object} option 上传文件的参数
 * @param {XMLHttpRequest} xhr XMLHttpRequest 实例
 * @return {Error} 报错信息
 */


function getError(action, option, xhr) {
  var msg;

  if (xhr.response) {
    msg = "".concat(xhr.response.error || xhr.response);
  } else if (xhr.responseText) {
    msg = "".concat(xhr.responseText);
  } else {
    msg = "fail to post ".concat(action, " ").concat(xhr.status);
  }

  var err = new Error(msg);
  err.status = xhr.status;
  err.method = 'post';
  err.url = action;
  return err;
}
/**
 * @description 设置区域选择 tab 标签展示值
 * @param {Number} index 索引标志位，有三个有效值; 0(默认):上方picker索引; 1:下方picker索引;
 * @return {String} showTabLabel
 */


function upload(option) {
  if (typeof XMLHttpRequest === 'undefined') {
    return;
  }

  var xhr = new XMLHttpRequest();
  var action = option.action; // 进入下载状态触发

  if (xhr.upload) {
    // 计算上传进度百分比
    xhr.upload.onprogress = function progress(e) {
      if (e.total > 0) {
        // 已加载的 / 总共大小
        e.percent = e.loaded / e.total * 100;
      } // 实时更新当前option的百分比值


      option.onProgress(e);
    }; // 构造表单数据


    var formData = new FormData(); // 插入表单数据

    if (option.data) {
      Object.keys(option.data).forEach(function (key) {
        formData.append(key, option.data[key]);
      });
    }

    formData.append(option.filename, option.file); // 注册失败事件回调函数处理器

    xhr.onerror = function error(e) {
      if (e instanceof Event) {
        e.message = e.target.status === 0 ? 'Error' : e.target.responseText;
      } // 失败调用展示状态


      option.onError(e);
    }; // 上传成功


    xhr.onload = function error(e) {
      if (xhr.status < 200 || xhr.status >= 300) {
        return option.onError(getError(action, option, xhr));
      } // 成功后修改展示状态


      option.onSuccess(getBody(xhr));
    }; // 创建一个post 请求 采用异步


    xhr.open('post', action, true); // 当前请求为跨域类型时是否在请求中协带cookie

    if (option.withCredentials && 'withCredentials' in xhr) {
      xhr.withCredentials = true;
    } // 设置请求头


    var headers = option.headers || {};

    for (var item in headers) {
      if (headers.hasOwnProperty(item) && headers[item] !== null) {
        xhr.setRequestHeader(item, headers[item]);
      }
    } // 发送数据


    xhr.send(formData);
    return xhr;
  }
}
// EXTERNAL MODULE: ./src/utils/id.js
var id = __webpack_require__(15);

// EXTERNAL MODULE: ./src/utils/index.js
var utils = __webpack_require__(1);

// EXTERNAL MODULE: external "wot-design/lib/loading"
var loading_ = __webpack_require__(8);
var loading_default = /*#__PURE__*/__webpack_require__.n(loading_);

// EXTERNAL MODULE: external "wot-design/lib/mixins/locale"
var locale_ = __webpack_require__(4);
var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/upload/src/main.vue?vue&type=script&lang=js&






/* harmony default export */ var mainvue_type_script_lang_js_ = ({
  name: 'WdUpload',
  mixins: [locale_default.a],
  data: function data() {
    return {
      uploadFiles: []
    };
  },
  model: {
    prop: 'fileList'
  },
  components: {
    WdLoading: loading_default.a
  },
  props: {
    action: {
      type: String,
      required: true
    },
    data: Object,
    name: {
      type: String,
      default: 'file'
    },
    headers: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    withCredentials: Boolean,
    fileList: Array,
    showName: Boolean,
    accept: {
      type: String,
      default: 'image/*'
    },
    loadingType: {
      type: String,
      default: 'ring'
    },
    loadingSize: {
      type: String,
      default: '24px'
    },
    loadingColor: {
      type: String,
      default: '#ffffff'
    },
    maxSize: {
      type: Number,
      default: Number.MAX_VALUE
    },
    customEvokeClass: String,
    multiple: Boolean,
    reverse: Boolean,
    limit: Number,
    // 是否展示限制个数
    showLimitMum: {
      type: Boolean,
      default: true
    },
    disabled: Boolean,
    // 开启图片预览
    showImgPreview: {
      type: Boolean,
      default: true
    },
    // 双指缩放最小倍数
    minZoom: {
      type: Number,
      default: 1 / 3
    },
    // 双指缩放最大倍数
    maxZoom: {
      type: Number,
      default: 3
    },
    // 轮播持续时间
    swipeDuration: {
      type: Number,
      default: 500
    },
    // 是否展示页码索引
    showIndex: {
      type: Boolean,
      default: true
    },
    // 是否展示预览列表
    showPreviewList: {
      type: Boolean,
      default: true
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    statusKey: {
      type: String,
      default: 'status'
    },
    // 文件上传之前
    beforeUpload: Function,
    // 文件移除前的钩子
    beforeRemove: Function,
    // 预览前的钩子
    beforePreview: Function
  },
  watch: {
    fileList: {
      immediate: true,
      handler: function handler(fileList) {
        var _this = this;

        if (Object(utils["c" /* isEqual */])(fileList, this.uploadFiles)) return;
        this.uploadFiles = fileList.map(function (item) {
          item.uid = id["a" /* default */].id++;
          item[_this.statusKey] = item[_this.statusKey] || 'success';
          item.size = item.size || '';
          item.action = _this.action || '';
          return item;
        });
      }
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.fileList.forEach(function (file) {
      if (file.url && file.url.indexOf('blob:') === 0) {
        URL.revokeObjectURL(file.url);
      }
    });
  },
  methods: {
    /**
     * @description 拼接上传的图片列表，向服务器发送数据
     * @param {Object} files 新上传的文件列表
     */
    readyToPost: function readyToPost(files) {
      var _this2 = this;

      var postFiles = Array.prototype.slice.call(files); // 单选只有一个

      if (!this.multiple) {
        postFiles = postFiles.slice(0, 1);
      }

      postFiles.forEach(function (file) {
        var _initState;

        // 设置files内容初始值
        var initState = (_initState = {
          uid: id["a" /* default */].id++
        }, defineProperty_default()(_initState, _this2.statusKey, 'loading'), defineProperty_default()(_initState, _this2.nameKey, file[_this2.nameKey]), defineProperty_default()(_initState, "size", file.size), defineProperty_default()(_initState, "file", file), defineProperty_default()(_initState, "url", URL.createObjectURL(file)), defineProperty_default()(_initState, "action", _this2.action), defineProperty_default()(_initState, "percent", 0), _initState); // 检查文件尺寸是否大于最大尺寸

        if (file.size <= _this2.maxSize) {
          _this2.uploadFiles.push(initState);

          _this2.$emit('input', _this2.uploadFiles);

          _this2.post(initState);
        } else {
          // 自定义超出尺寸行为
          _this2.$emit('oversize', {
            file: file
          });
        }
      });
    },

    /**
     * @description 上传数据发送
     * @param {Object} showFile 发送的文件
     */
    post: function post(showFile) {
      var _this3 = this;

      var options = {
        headers: this.headers,
        withCredentials: this.withCredentials,
        file: showFile.file,
        data: this.data,
        filename: this.name,
        action: this.action,
        onProgress: function onProgress(e) {
          _this3.handleProgress(e, showFile);
        },
        onSuccess: function onSuccess(res) {
          _this3.handleSuccess(res, showFile);
        },
        onError: function onError(err) {
          _this3.handleError(err, showFile);
        } // 清空当前input上传内容，使其可以重复上传相同的图片而不被拦截

      };
      this.$refs.input.value = null; // 开始执行上传图片请求

      upload(options);
    },

    /**
     * @description 根据当前上传文件的 uid 返回数组单项的引用
     * @param {Object} file 上传的文件
     * @return {Object} 当前文件在数组中的引用
     */
    getFileFromList: function getFileFromList(file) {
      var fileList = this.uploadFiles;
      var target;
      fileList.every(function (item) {
        // item 尺寸为空下载一遍
        target = file.uid === item.uid ? item : null;
        return !target;
      });
      return target;
    },
    handleChange: function handleChange(_ref) {
      var _this4 = this;

      var files = _ref.target.files;
      // 检查是否是图片
      if (!files || this.disabled) return; // 检查上传数量是否超过限制数

      if (this.limit && this.uploadFiles.length + files.length > this.limit) {
        this.$emit('exceed', {
          files: files,
          fileList: this.uploadFiles
        });
        return;
      } // 上传前钩子


      if (this.beforeUpload) {
        this.beforeUpload({
          files: files,
          fileList: this.uploadFiles,
          resolve: function resolve(isPass) {
            isPass && _this4.readyToPost(files);
            _this4.$refs.input.value = null;
          }
        });
      } else {
        this.readyToPost(files);
        this.$refs.input.value = null;
      }
    },
    // 实时更新当前option的数据
    handleSuccess: function handleSuccess(res, rawFile) {
      var file = this.getFileFromList(rawFile);

      if (file) {
        file[this.statusKey] = 'success';
        file.response = res;
        this.$emit('success', {
          response: res,
          file: file,
          fileList: this.uploadFiles
        });
      }
    },
    handleError: function handleError(err, rawFile) {
      var file = this.getFileFromList(rawFile);

      if (file) {
        file.error = err.message;
        file[this.statusKey] = 'fail';
        this.$emit('fail', {
          error: err,
          file: file,
          fileList: this.uploadFiles
        });
      }
    },
    handleProgress: function handleProgress(e, rawFile) {
      var file = this.getFileFromList(rawFile);

      if (file) {
        file.percent = e.percent;
        this.$emit('progress', {
          event: e,
          file: file,
          fileList: this.uploadFiles
        });
      }
    },
    handlePreview: function handlePreview(urls, file, index) {
      var _this5 = this;

      // 调用图片预览组件
      this.$preview({
        urls: urls,
        current: index,
        minZoom: this.minZoom,
        maxZoom: this.maxZoom,
        showIndex: this.showIndex,
        swipeDuration: this.swipeDuration,
        onClose: function onClose(_ref2) {
          var index = _ref2.index;

          _this5.$emit('preview-close', {
            index: index
          });
        },
        onOpen: function onOpen(_ref3) {
          var index = _ref3.index;

          _this5.$emit('preview-open', {
            index: index
          });
        },
        onLongTap: function onLongTap(_ref4) {
          var index = _ref4.index;

          _this5.$emit('preview-long-tap', {
            index: index
          });
        }
      });
    },
    handleRemove: function handleRemove(file, index) {
      this.uploadFiles.splice(index, 1);
      this.$emit('input', this.uploadFiles);
      this.$emit('remove', {
        file: file,
        fileList: this.uploadFiles
      });
    },
    removeFile: function removeFile(file, index) {
      var _this6 = this;

      if (this.beforeRemove) {
        this.beforeRemove({
          file: file,
          index: index,
          fileList: this.uploadFiles,
          resolve: function resolve(isPass) {
            isPass && _this6.handleRemove(file, index);
          }
        });
      } else {
        this.handleRemove(file, index);
      }
    },
    preview: function preview(imgList, file, index) {
      var _this7 = this;

      if (this.beforePreview) {
        this.beforePreview({
          file: file,
          index: index,
          imgList: imgList,
          resolve: function resolve(isPass) {
            isPass && _this7.handlePreview(imgList, file, index);
          }
        });
      } else {
        this.handlePreview(imgList, file, index);
      }
    }
  },
  render: function render(h) {
    var _this8 = this;

    var limit = this.limit,
        showLimitMum = this.showLimitMum,
        reverse = this.reverse,
        uploadFiles = this.uploadFiles,
        disabled = this.disabled,
        multiple = this.multiple,
        accept = this.accept,
        loadingType = this.loadingType,
        loadingColor = this.loadingColor,
        loadingSize = this.loadingSize,
        showName = this.showName,
        showPreviewList = this.showPreviewList,
        t = this.t,
        customEvokeClass = this.customEvokeClass;
    var input = h("input", {
      "ref": "input",
      "attrs": {
        "type": "file",
        "multiple": multiple,
        "accept": accept,
        "disabled": disabled
      },
      "class": "wd-upload__input",
      "on": {
        "change": this.handleChange
      }
    }); // 限制数量时，展示上传文件个数

    var evokeLimitNum = limit && showLimitMum ? h("div", {
      "class": "wd-upload__evoke-num"
    }, ["\uFF08", uploadFiles.length, "/", limit, "\uFF09"]) : ''; // 唤起项div

    var evoke = !limit || uploadFiles.length < limit ? h("div", {
      "key": -1,
      "class": ['wd-upload__evoke', 'wd-upload-list-item', disabled ? 'is-disabled' : '', this.$slots.default ? 'is-slot-default' : '', customEvokeClass]
    }, [this.$slots.default || h("i", {
      "class": "wd-icon-fill-camera"
    }), this.$slots.default ? '' : evokeLimitNum, input]) : ''; // loading 组件

    var loading = h("wd-loading", {
      "attrs": {
        "type": loadingType,
        "size": loadingSize,
        "color": loadingColor
      }
    });
    var imgList = []; // 图片预览的列表

    var previewList = uploadFiles.length !== 0 ? uploadFiles.map(function (file, index) {
      _this8.showImgPreview && imgList.push(file.url); // 加载中、失败状态下的样式

      var statusDiv = file[_this8.statusKey] === 'loading' ? h("div", {
        "class": "wd-upload__status-content"
      }, [loading, h("span", {
        "class": "wd-upload__progress-txt"
      }, [parseInt(file.percent), "%"])]) : file[_this8.statusKey] === 'fail' ? h("div", {
        "class": "wd-upload__status-content"
      }, [h("i", {
        "class": "wd-icon-close-outline wd-upload__icon"
      }), h("span", {
        "class": "wd-upload__progress-txt"
      }, [file.error || t('wd.upload.error')])]) : '';
      var mask = file[_this8.statusKey] !== 'success' ? h("div", {
        "class": "wd-upload__mask wd-upload__status-content"
      }, [statusDiv]) : ''; // 右上角关闭按钮

      var closeButton = file[_this8.statusKey] === 'loading' || disabled ? '' : h("i", {
        "class": "wd-icon-error-fill wd-upload__close",
        "on": {
          "click": function click() {
            _this8.removeFile(file, index);
          }
        }
      });
      return h("div", {
        "class": "wd-upload__preview wd-upload-list-item",
        "key": file.uid
      }, [mask, h("div", {
        "class": "wd-upload__status-content",
        "on": {
          "click": function click() {
            _this8.showImgPreview && _this8.preview(imgList, file, index);
          }
        }
      }, [h("img", {
        "attrs": {
          "src": file.url
        },
        "class": "wd-upload__picture"
      }), showName && file[_this8.statusKey] === 'success' ? h("div", {
        "class": "wd-upload__picture-name"
      }, [file[_this8.nameKey] || t('wd.upload.fileName')]) : '']), closeButton]);
    }) : '';

    var transition = function transition(front, end) {
      return _this8.$slots.default ? h("div", {
        "class": "wd-upload"
      }, [front, h("transition-group", {
        "attrs": {
          "name": "wd-upload-list",
          "tag": "div"
        },
        "class": "wd-upload__preview-list"
      }, [end])]) : h("transition-group", {
        "attrs": {
          "name": "wd-upload-list",
          "tag": "div"
        },
        "class": "wd-upload"
      }, [front, end]);
    };

    var upload = showPreviewList ? reverse ? transition(evoke, previewList) : transition(previewList, evoke) : evoke;
    return upload;
  }
});
// CONCATENATED MODULE: ./packages/upload/src/main.vue?vue&type=script&lang=js&
 /* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);

// CONCATENATED MODULE: ./packages/upload/src/main.vue
var render, staticRenderFns




/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  src_mainvue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (false) { var api; }
component.options.__file = "packages/upload/src/main.vue"
/* harmony default export */ var main = (component.exports);
// CONCATENATED MODULE: ./packages/upload/index.js


main.install = function (Vue) {
  Vue.component(main.name, main);
};

/* harmony default export */ var packages_upload = __webpack_exports__["default"] = (main);

/***/ }),

/***/ 15:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
var context = {
  id: 1000
};
/* harmony default export */ __webpack_exports__["a"] = (context);

/***/ }),

/***/ 2:
/***/ (function(module, exports) {

module.exports = require("vue");

/***/ }),

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("wot-design/lib/mixins/locale");

/***/ }),

/***/ 5:
/***/ (function(module, exports) {

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

module.exports = _defineProperty;

/***/ }),

/***/ 8:
/***/ (function(module, exports) {

module.exports = require("wot-design/lib/loading");

/***/ })

/******/ });