comment/lib/components/Editor/Upload.js

'use strict';

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

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

var _modal2 = _interopRequireDefault(_modal);

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

var _upload2 = _interopRequireDefault(_upload);

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

var _icon2 = _interopRequireDefault(_icon);

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

var _message3 = _interopRequireDefault(_message2);

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; }; }();

require('antd/es/modal/style/css');

require('antd/es/upload/style/css');

require('antd/es/icon/style/css');

require('antd/es/message/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _dayjs = require('dayjs');

var _dayjs2 = _interopRequireDefault(_dayjs);

var _shortid = require('shortid');

var _shortid2 = _interopRequireDefault(_shortid);

var _constant = require('../../constant');

var _Comment = require('../../Comment');

var _Comment2 = _interopRequireDefault(_Comment);

require('./Upload.css');

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 client = function client(oss) {
  return new window.OSS.Wrapper({
    accessKeyId: oss.access_key_id,
    accessKeySecret: oss.access_key_secret,
    stsToken: oss.security_token,
    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
    bucket: _constant.OSS_BUCKET
  });
};

var uploadPath = function uploadPath(path, file) {
  return path + '/' + (0, _dayjs2.default)().format('YYYYMMDD') + '/' + _shortid2.default.generate() + '.' + file.type.split('/')[1];
};

var UploadToOss = function UploadToOss(oss, path, file) {
  var url = uploadPath(path, file);
  return new Promise(function (resolve, reject) {
    client(oss).multipartUpload(url, file).then(function (data) {
      resolve(data);
    }).catch(function (error) {
      reject(error);
    });
  });
};

var App = function (_React$Component) {
  _inherits(App, _React$Component);

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

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

    _this.state = {
      previewVisible: false,
      previewImage: ''
    };
    _this.handleCancel = _this.handleCancel.bind(_this);
    _this.handlePreview = _this.handlePreview.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    _this.customRequest = _this.customRequest.bind(_this);
    return _this;
  }

  _createClass(App, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.props.app.sOssSts();
    }
  }, {
    key: 'handleCancel',
    value: function handleCancel() {
      this.setState({ previewVisible: false });
    }
  }, {
    key: 'handlePreview',
    value: function handlePreview(file) {
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true
      });
    }
  }, {
    key: 'handleChange',
    value: function handleChange(_ref) {
      var fileList = _ref.fileList;

      this.props.onChangeFileList(fileList);
    }
  }, {
    key: 'customRequest',
    value: function customRequest(info) {
      var _this2 = this;

      var file = info.file;

      info.onProgress({ percent: 10 });
      var reader = new FileReader();
      reader.readAsDataURL(info.file);
      reader.onloadend = function () {
        info.onProgress({ percent: 20 });
        // DRIVER_LICENSE_PATH oss 的存储路径位置
        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
          info.onProgress({ percent: 100 });
          info.onSuccess();
          _this2.props.onUpload({ path: data.name, uid: file.uid });
        }).catch(function (e) {
          _message3.default.error(e.message || _constant.ERROR_DEFAULT);
          info.onError(e);
        });
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          previewVisible = _state.previewVisible,
          previewImage = _state.previewImage;
      var _props = this.props,
          fileList = _props.fileList,
          maxUpload = _props.maxUpload;

      var uploadButton = _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_icon2.default, { type: 'plus' }),
        _react2.default.createElement(
          'div',
          { className: 'ant-upload-text' },
          '\u4E0A\u4F20'
        )
      );
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _upload2.default,
          {
            accept: 'image/jpg,image/jpeg,image/png,image/bmp',
            listType: 'picture-card',
            fileList: fileList,
            customRequest: this.customRequest,
            onPreview: this.handlePreview,
            onChange: this.handleChange
          },
          fileList.length >= maxUpload ? null : uploadButton
        ),
        _react2.default.createElement(
          _modal2.default,
          {
            visible: previewVisible,
            footer: null,
            onCancel: this.handleCancel
          },
          _react2.default.createElement('img', { alt: 'upload', style: { width: '100%' }, src: previewImage })
        )
      );
    }
  }]);

  return App;
}(_react2.default.Component);

exports.default = (0, _Comment2.default)(App);
//# sourceMappingURL=Upload.js.map