deer-ui/es/upload/upload.js

React.js UI components for PC Web

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _utils = require("../utils");

var _message = _interopRequireDefault(require("../message"));

var _progress = _interopRequireDefault(require("../progress"));

var _uploadFileTypeNames;

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

// 上传 对应 进度条属性 的状态
var UPLOAD_STATUS = {
  ERROR: "error",
  SUCCESS: "success",
  PROGRESS: "progress",
  ABORT: "warning",
  TIMEOUT: "warning"
};
var uploadFileType = "file";
var uploadImageType = "image";
var uploadFileTypeNames = (_uploadFileTypeNames = {}, (0, _defineProperty2.default)(_uploadFileTypeNames, uploadFileType, "文件"), (0, _defineProperty2.default)(_uploadFileTypeNames, uploadImageType, "图片"), _uploadFileTypeNames); // 默认图片上传文件后缀名限制

var imageReg = /\/(?:jpeg|jpg|png|gif|svg)/i;

var Upload = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(Upload, _Component);

  var _super = _createSuper(Upload);

  function Upload(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Upload);
    _this = _super.call(this, props);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      uploadList: []
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onSelect", function () {
      _this.fileRef.current.click();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelect", function () {
      var files = (0, _toConsumableArray2.default)(_this.fileRef.current.files);
      files.forEach(function (file, index) {
        var cover = _this.props.type === uploadImageType && _this.getUrl(file) || "";
        var fileInfo = {
          name: file.name,
          size: file.size,
          type: file.type,
          progress: 0,
          status: UPLOAD_STATUS.PROGRESS,
          cover: cover
        };

        if (_this.props.beforeUpload && !_this.props.beforeUpload(fileInfo) || !_this.defaultBeforeUpload(fileInfo)) {
          return;
        }

        var uploadList = (0, _toConsumableArray2.default)(_this.state.uploadList);
        uploadList.push(fileInfo);

        _this.setState({
          uploadList: uploadList
        }, function () {
          _this.onUploadFile(fileInfo, index);
        });
      });

      _this.props.onSelect(_this.state.uploadList);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeUploadStatus", function (status, index) {
      var uploadList = (0, _toConsumableArray2.default)(_this.state.uploadList);
      uploadList[index].status = status;

      _this.setState({
        uploadList: uploadList,
        uploading: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isImage", function (type) {
      return imageReg.test(type);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultBeforeUpload", function (_ref) {
      var size = _ref.size,
          type = _ref.type;
      var _this$props = _this.props,
          maxSize = _this$props.maxSize,
          uploadType = _this$props.type;
      var imageType = type.split("/").pop();

      if (uploadType === uploadImageType && !_this.isImage(type)) {
        _message.default.error("".concat(_this.typeName, " \u4E0D\u652F\u6301 ").concat(imageType, " \u683C\u5F0F"));

        return false;
      }

      if (maxSize && typeof maxSize === "number") {
        var fileSize = size / 1024;

        if (fileSize > maxSize) {
          _message.default.error("".concat(_this.typeName, " \u6700\u5927\u652F\u6301 ").concat((0, _utils.formatFileSize)(maxSize * 1024)));

          return false;
        }
      }

      return true;
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadFile", function (file, index) {
      var _this$props2 = _this.props,
          name = _this$props2.name,
          action = _this$props2.action;
      var formData = new FormData();
      var xhr = new XMLHttpRequest();
      var newFile = new Blob([file]);
      formData.append(name, newFile);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);

            _this.changeUploadStatus(UPLOAD_STATUS.SUCCESS, index);

            _this.props.onComplete(res);
          } else {
            _this.changeUploadStatus(UPLOAD_STATUS.ERROR, index);

            _this.props.onError();
          }
        }
      };

      xhr.onloadstart = function () {
        _this.changeUploadStatus(UPLOAD_STATUS.PROGRESS, index);

        _this.props.onStart();
      };

      xhr.onerror = function (err) {
        _this.changeUploadStatus(UPLOAD_STATUS.ERROR, index);

        _this.props.onError(err);
      };

      xhr.onabort = function (err) {
        _this.changeUploadStatus(UPLOAD_STATUS.ABORT, index);

        _this.props.onAbort(err);
      };

      xhr.ontimeout = function (err) {
        _this.changeUploadStatus(UPLOAD_STATUS.TIMEOUT, index);

        _this.props.onTimeOut(err);
      };

      xhr.onloadend = function (e) {
        _this.setState({
          uploading: false
        });
      };

      xhr.upload.onprogress = function (e) {
        var loaded = e.loaded,
            total = e.total;
        var progress = Math.round(loaded * 100 / total);
        var uploadList = (0, _toConsumableArray2.default)(_this.state.uploadList);
        uploadList[index].progress = progress;
        uploadList[index].status = UPLOAD_STATUS.PROGRESS;

        _this.props.onProgress(e, progress);

        _this.setState({
          uploadList: uploadList
        });
      };

      xhr.open("POST", action, true);
      xhr.send(formData);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getUrl", function (file) {
      return window.URL.createObjectURL(file);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPreviewCover", function (cover) {
      return function () {// Modal.info({
        //   title: "预览",
        //   showMask: true,
        //   okText: "关闭",
        //   content: (
        //     <div className={`${this.props.prefixCls}-preview`}>
        //       <img src={cover} />
        //     </div>
        //   )
        // });
        // this.props.onPreview(cover);
      };
    });
    _this.fileRef = (0, _react.createRef)();
    return _this;
  }

  (0, _createClass2.default)(Upload, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          className = _this$props3.className,
          maxSize = _this$props3.maxSize,
          onComplete = _this$props3.onComplete,
          onStart = _this$props3.onStart,
          onTimeOut = _this$props3.onTimeOut,
          typeName = _this$props3.typeName,
          children = _this$props3.children,
          accept = _this$props3.accept,
          multiple = _this$props3.multiple,
          showUploadList = _this$props3.showUploadList,
          type = _this$props3.type,
          attr = (0, _objectWithoutProperties2.default)(_this$props3, ["prefixCls", "className", "maxSize", "onComplete", "onStart", "onTimeOut", "typeName", "children", "accept", "multiple", "showUploadList", "type"]);
      var uploadList = this.state.uploadList;
      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
        className: (0, _classnames.default)(prefixCls, className)
      }, attr), /*#__PURE__*/_react.default.createElement("input", {
        type: "file",
        hidden: true,
        multiple: multiple,
        accept: accept,
        ref: this.fileRef,
        onChange: this.onSelect
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-inner")),
        onClick: this._onSelect
      }, children), showUploadList && /*#__PURE__*/_react.default.createElement("ul", {
        className: (0, _classnames.default)("".concat(prefixCls, "-upload-list"))
      }, uploadList.map(function (_ref2, index) {
        var name = _ref2.name,
            size = _ref2.size,
            progress = _ref2.progress,
            status = _ref2.status,
            cover = _ref2.cover;
        var hasCover = type === uploadImageType && cover;
        return /*#__PURE__*/_react.default.createElement("li", {
          key: index,
          className: (0, _classnames.default)("".concat(prefixCls, "-upload-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-upload-item-has-cover"), hasCover))
        }, hasCover && /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-upload-item-cover")),
          onClick: _this2.onPreviewCover(cover),
          style: {
            backgroundImage: "url(".concat(cover, ")")
          }
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-upload-item-content"))
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)("".concat(prefixCls, "-upload-item-file-info"))
        }, /*#__PURE__*/_react.default.createElement("span", null, name), /*#__PURE__*/_react.default.createElement("span", null, "/"), /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.formatFileSize)(size))), /*#__PURE__*/_react.default.createElement(_progress.default, {
          percent: progress,
          type: status,
          className: "".concat(prefixCls, "-upload-item-progress")
        })));
      })));
    }
  }]);
  return Upload;
}(_react.Component);

(0, _defineProperty2.default)(Upload, "defaultProps", {
  prefixCls: "deer-ui-upload",
  multiple: false,
  //是否允许多选
  maxSize: 1024,
  //上传文件大小限制
  onSelect: function onSelect() {},
  onComplete: function onComplete() {},
  onStart: function onStart() {},
  onTimeOut: function onTimeOut() {},
  onError: function onError() {},
  name: "file",
  showUploadList: true,
  typeName: uploadFileTypeNames[uploadFileType],
  type: uploadFileType //上传的文件类型 图片 还是 文件

});
(0, _defineProperty2.default)(Upload, "propTypes", {
  prefixCls: _propTypes.default.string.isRequired,
  multiple: _propTypes.default.bool,
  maxSize: _propTypes.default.number,
  onComplete: _propTypes.default.func,
  onSelect: _propTypes.default.func,
  onStart: _propTypes.default.func,
  onTimeOut: _propTypes.default.func,
  onError: _propTypes.default.func,
  name: _propTypes.default.string,
  showUploadList: _propTypes.default.bool
});
var _default = Upload;
exports.default = _default;