qm-bus/lib/GalleryBox/components/MediaUpload.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 _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

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

var _QMImg3 = _interopRequireDefault(_QMImg2);

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

var _QMConst3 = _interopRequireDefault(_QMConst2);

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

var _message3 = _interopRequireDefault(_message2);

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, _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _iflux = require('iflux2');

var _ql = require('../ql');

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 noop = function noop() {};

var MediaUpload = (0, _iflux.Relax)(_class = (_temp = _class2 = function (_Component) {
  _inherits(MediaUpload, _Component);

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

    var _this = _possibleConstructorReturn(this, (MediaUpload.__proto__ || Object.getPrototypeOf(MediaUpload)).call(this, props));

    _this._onImageDel = function (file) {
      return _this.props.removeVideo(file.hash);
    };

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

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

    _this._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 = '//pic.qianmi.com/qmui/v0.2/img/video-img.png';
          _this.props.addVideo(file.response.data[0]);
        }
      } 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('视频上传失败.');
        }
      }
      _this.setState({ files: fileList });
    };

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

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

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

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

        // 3.文件大小校验
        if (file.size > 1024 * 1024 * size) {
          _this.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 = _this.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(_this.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;
              }
            }
          }

          _this.errorSet.clear();
        }
      }
    };

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

  _createClass(MediaUpload, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.videos.size == 0) {
        this.setState({ files: [] });
      }
    }

    /**
     * 上传前校验
     */

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          formLayout = _props.formLayout,
          headers = _props.headers,
          limit = _props.limit,
          rule = _props.rule,
          scope = _props.scope;
      var msg = rule.msg,
          size = rule.size,
          filetype = rule.filetype,
          vedio_limit = rule.limit;

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

      var videoUrl = _QMConst3.default.HOST['v_upload_api'] + '/api/upload/' + (scope == 'personal' ? 'user/video' : 'video');
      return _react2.default.createElement(
        _form2.default,
        null,
        _react2.default.createElement(
          FormItem,
          _extends({}, formLayout, {
            label: '\u672C\u5730\u89C6\u9891',
            help: _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: msg } }) }),
          _react2.default.createElement(
            'div',
            { className: 'local-img-preview clearfix' },
            _react2.default.createElement(
              _upload2.default,
              {
                action: videoUrl,
                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('video', {
              src: _QMImg3.default.src({ src: this.state.previewImage }),
              style: { maxWidth: '480px', maxHeight: '480px' },
              controls: 'controls'
            })
          )
        )
      );
    }
  }]);

  return MediaUpload;
}(_react.Component), _class2.defaultProps = {
  limit: 10,
  rule: {
    limit: 5,
    size: 200, // 文件大小限制
    filetype: 'mp4,avi,rmvb', // 支持的文件类型
    msg: function msg(_ref5) {
      var limit = _ref5.limit,
          size = _ref5.size,
          filetype = _ref5.filetype;
      return '\u89C6\u9891\u683C\u5F0F\u4EC5\u652F\u6301\uFF1A' + filetype + '\uFF0C\u4E14\u4E00\u6B21\u6700\u591A\u4E0A\u4F20 ' + limit + '\u4E2A\uFF0C\u6BCF\u4E2A\u4E0D\u80FD\u8D85\u8FC7 ' + size + 'MB\uFF01';
    }
  },
  videos: _ql.videosQL,
  addVideo: noop,
  removeVideo: noop
}, _temp)) || _class;

exports.default = MediaUpload;