qm-bus/lib/UploadBox/components/image-upload.js

千米公有云业务组件库

'use strict';

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

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

var _upload = require('antd/lib/upload');

var _upload2 = _interopRequireDefault(_upload);

var _QMConst2 = require('qm-ux/lib/QMConst');

var _QMConst3 = _interopRequireDefault(_QMConst2);

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _QMImg2 = require('qm-ui/lib/QMImg');

var _QMImg3 = _interopRequireDefault(_QMImg2);

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _message2 = require('antd/lib/message');

var _message3 = _interopRequireDefault(_message2);

var _QMValidator2 = require('qm-ux/lib/QMValidator');

var _QMValidator3 = _interopRequireDefault(_QMValidator2);

var _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _webapi = require('../webapi');

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var FormItem = _form2.default.Item;
var Uploader = (_temp = _class = function (_Component) {
  _inherits(Uploader, _Component);

  function Uploader(props) {
    _classCallCheck(this, Uploader);

    var _this2 = _possibleConstructorReturn(this, (Uploader.__proto__ || Object.getPrototypeOf(Uploader)).call(this, props));

    _this2._onPull = function () {
      var _this = _this2;
      _this2.setState({ loading: true });
      var url = _this2.state.linkAddress;
      if (url) {
        if (_QMValidator3.default.protocolHead(url)) {
          // 这里只校验协议头,防止有使用短连接的情况
          (0, _webapi.checkUrl)(encodeURIComponent(url)).then(function (res) {
            setTimeout(function () {
              if (res.err) {
                _message3.default.error(res.err.message);
                _this.setState({ loading: false });
              } else {
                _this2.setState({
                  linkAddress: '',
                  loading: false,
                  netImages: _this2.state.netImages.concat([res.data])
                });
                _this2.props.setNetImg(res.data);
              }
            }, 500);
          }, function (res) {
            _this.setState({ loading: false });
          });
        } else {
          _this.setState({ loading: false });
          _message3.default.error('请输入正确的图片地址');
        }
      } else {
        _this.setState({ loading: false });
        _message3.default.error('请输入图片地址');
      }
    };

    _this2._onNetImageDel = function (v) {
      _this2.state.netImages.splice(v, 1);
      _this2.setState({ netImages: _this2.state.netImages });
    };

    _this2._onImageDel = function (file) {
      _this2.state.files.splice(_this2.state.files.indexOf(file), 1);
      _this2.setState({ files: _this2.state.files });
    };

    _this2._onPreview = function (file) {
      if (file.response) {
        _this2.setState({ preview: true, previewImage: file.response.data[0].url });
      } else {
        _this2.setState({ preview: true, previewImage: file.url });
      }
    };

    _this2._onPreviewCancel = function () {
      _this2.setState({ preview: false });
    };

    _this2._onChange = function (_ref) {
      var file = _ref.file,
          fileList = _ref.fileList;

      if (file.response && file.response.success && file.status == 'done') {
        var url = file.response.data[0].url;
        if (fileList.filter(function (i) {
          return i.hash == url && i.response;
        }).length > 0) {
          _message3.default.warning('图片已经上传过了.');
          fileList.splice(fileList.indexOf(file), 1);
        } else {
          file.hash = url;
          file.url = url + '@100w_100h';
          file.thumbUrl = url + '@100w_100h';
        }
      } else if (file.response && file.status == 'done') {
        var _index = fileList.findIndex(function (f) {
          return f.uid == file.uid;
        });
        fileList.splice(_index, 1);
        if (file.response.message) {
          _message3.default.error(file.response.message);
        } else {
          _message3.default.error('图片上传失败.');
        }
      }
      _this2.setState({ files: fileList });
      _this2.props.setImg(_this2.state.files);
    };

    _this2.onValidBeforeUpload = function (file, files) {
      var _this2$props = _this2.props,
          limit = _this2$props.limit,
          rule = _this2$props.rule;
      var size = rule.size,
          filetype = rule.filetype,
          pic_limit = rule.limit;

      limit = pic_limit || limit;
      var index = files.indexOf(file);
      var name = file.name.toLowerCase();

      try {
        // 1.数量校验
        if (_this2.state.files.length + index > limit - 1) {
          _this2.errorSet.add('limit');
          throw new Error(limit);
        }

        // 2.文件类型校验
        if (!(new RegExp(filetype.split(',').join('|')).test(name) || /^image/gi.test(file.type))) {
          _this2.errorSet.add('type');
          throw new Error(limit);
        }

        // 3.文件大小校验
        if (file.size > 1024 * 1024 * size) {
          _this2.errorSet.add('size');
          throw new Error(limit);
        }

        return true;
      } catch (e) {
        return false;
      } finally {
        if (index === files.length - 1) {
          var i = 0;
          var _iteratorNormalCompletion = true;
          var _didIteratorError = false;
          var _iteratorError = undefined;

          try {
            for (var _iterator = _this2.errorSet[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
              var s = _step.value;

              _message3.default.config({
                top: 20 + 40 * i++,
                duration: 5
              });
              _message3.default.error(_this2.errorMsg[s]({ limit: limit, filetype: filetype, size: size }));
            }
          } catch (err) {
            _didIteratorError = true;
            _iteratorError = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
              }
            } finally {
              if (_didIteratorError) {
                throw _iteratorError;
              }
            }
          }

          _this2.errorSet.clear();
        }
      }
    };

    _this2._onLinkAddressChange = function (e) {
      return _this2.setState({ linkAddress: e.target.value });
    };

    _this2.errorSet = new Set();
    _this2.errorMsg = {
      limit: function limit(_ref2) {
        var _limit = _ref2.limit;
        return '\u56FE\u7247\u6587\u4EF6\u6700\u591A\u53EA\u80FD\u4E0A\u4F20 ' + _limit + '\u5F20\uFF01';
      },
      type: function type(_ref3) {
        var filetype = _ref3.filetype;
        return '\u56FE\u7247\u6587\u4EF6\u683C\u5F0F\u4EC5\u652F\u6301\uFF1A' + filetype + '\uFF01';
      },
      size: function size(_ref4) {
        var _size = _ref4.size;
        return '\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u4E0D\u5F97\u8D85\u8FC7 ' + _size + 'MB\uFF01';
      }
    };
    _this2.state = {
      loading: false,
      preview: false,
      previewImage: '',
      files: [],
      linkAddress: '',
      netImages: [],
      videos: []
    };
    return _this2;
  }

  /**
   * 上传前校验
   */


  _createClass(Uploader, [{
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          formLayout = _props.formLayout,
          headers = _props.headers,
          limit = _props.limit,
          rule = _props.rule;
      var msg = rule.msg,
          filetype = rule.filetype,
          size = rule.size,
          pic_limit = rule.limit;

      limit = pic_limit || limit;
      if (msg && typeof msg === 'function') {
        msg = msg({ limit: limit, filetype: filetype, size: size });
      }

      return _react2.default.createElement(
        _form2.default,
        null,
        _react2.default.createElement(
          FormItem,
          _extends({}, formLayout, { label: '\u7F51\u7EDC\u56FE\u7247' }),
          _react2.default.createElement(_input2.default, {
            ref: 'picture-link',
            type: 'text',
            value: this.state.linkAddress,
            placeholder: '\u8BF7\u8F93\u5165\u56FE\u7247\u94FE\u63A5\u5730\u5740',
            disabled: this.state.netImages.length >= 5,
            onChange: this._onLinkAddressChange
          }),
          _react2.default.createElement(
            _button2.default,
            {
              className: 'pushl',
              size: 'large',
              loading: !!this.state.loading,
              disabled: this.state.netImages.size >= 5,
              onClick: this._onPull },
            '\u63D0\u53D6'
          ),
          _react2.default.createElement(
            'div',
            { className: 'network-img-preview' },
            _react2.default.createElement(
              'div',
              { className: 'ant-upload-list ant-upload-list-picture-card' },
              this.state.netImages.map(function (i, v) {
                return _react2.default.createElement(
                  'div',
                  {
                    className: 'ant-upload-list-item ant-upload-list-item-done',
                    key: v + '_' + i.url },
                  _react2.default.createElement(
                    'div',
                    { className: 'ant-upload-list-item-info' },
                    _react2.default.createElement(
                      'a',
                      {
                        className: 'ant-upload-list-item-thumbnail',
                        href: _QMImg3.default.src({ src: i.url }),
                        target: '_blank' },
                      _react2.default.createElement('img', { src: _QMImg3.default.src({ src: i.url }), alt: i.name, title: i.name })
                    ),
                    _react2.default.createElement(
                      'span',
                      null,
                      _react2.default.createElement(_icon2.default, { type: 'eye-o', onClick: _this3._onPreview.bind(_this3, i) }),
                      _react2.default.createElement(_icon2.default, {
                        title: 'Remove file',
                        type: 'delete',
                        onClick: _this3._onNetImageDel.bind(_this3, v)
                      })
                    )
                  )
                );
              })
            )
          )
        ),
        _react2.default.createElement(
          FormItem,
          _extends({}, formLayout, {
            label: '\u672C\u5730\u56FE\u7247',
            help: _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: msg } }) }),
          _react2.default.createElement(
            'div',
            { className: 'local-img-preview clearfix' },
            _react2.default.createElement(
              _upload2.default,
              {
                action: _QMConst3.default.HOST['v_upload_api'] + '/api/upload/image',
                headers: headers,
                multiple: true,
                onPreview: this._onPreview,
                fileList: this.state.files.map(function (i) {
                  return (0, _objectAssign2.default)({}, i, { url: _QMImg3.default.src({ src: i.url }) });
                }),
                onChange: this._onChange,
                listType: 'picture-card',
                beforeUpload: this.onValidBeforeUpload,
                withCredentials: true,
                onRemove: this._onImageDel },
              this.state.files.length < limit ? _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(_icon2.default, { type: 'plus' })
              ) : null
            )
          ),
          _react2.default.createElement(
            _modal2.default,
            { visible: this.state.preview, footer: null, onCancel: this._onPreviewCancel },
            _react2.default.createElement(_QMImg3.default, { alt: 'example', style: { width: '100%' }, src: this.state.previewImage })
          )
        )
      );
    }
  }]);

  return Uploader;
}(_react.Component), _class.defaultProps = {
  limit: 10, // 图片数量限制
  rule: {
    limit: 10, // 文件数量限制
    size: 2, // 文件大小限制
    filetype: 'jpeg,jpg,gif,png', // 支持的文件类型
    msg: function msg(_ref5) {
      var limit = _ref5.limit,
          size = _ref5.size,
          filetype = _ref5.filetype;
      return '\u56FE\u7247\u683C\u5F0F\u4EC5\u652F\u6301\uFF1A' + filetype + '\uFF0C\u4E14\u4E00\u6B21\u6700\u591A\u4E0A\u4F20 ' + limit + '\u5F20\uFF0C\u6BCF\u5F20\u4E0D\u80FD\u8D85\u8FC7 ' + size + 'MB\uFF01';
    }
  }
}, _temp);
exports.default = Uploader;