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 _spin = require("antd/es/spin");

var _spin2 = _interopRequireDefault(_spin);

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");

require("antd/es/spin/style");

require("antd/es/upload/style");

require("antd/es/icon/style");

require("antd/es/message/style");

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 _reactIntlUniversal = require("react-intl-universal");

var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);

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: "",
      loading: false
    };
    _this.handleCancel = _this.handleCancel.bind(_this);
    _this.handlePreview = _this.handlePreview.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    _this.customRequest = _this.customRequest.bind(_this);
    _this.handleCloseClick = _this.handleCloseClick.bind(_this);
    _this.onImgLoad = _this.onImgLoad.bind(_this);
    return _this;
  }

  _createClass(App, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.app.sOssSts();
      if (this.props.onRef) {
        this.props.onRef(this);
      }
    }
  }, {
    key: "onImgLoad",
    value: function onImgLoad() {
      this.setState({
        loading: false
      });
    }
  }, {
    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(data);
          _this2.props.onUpload({ path: data.name, uid: file.uid });
        }).catch(function (e) {
          var msg = e.message || _constant.ERROR_DEFAULT;
          if (_this2.props.showError) {
            _message3.default.error(msg);
          }
          if (_this2.props.onError) {
            _this2.props.onError(msg, { response: e.response });
          }
          info.onError(e);
        });
      };
    }
  }, {
    key: "handleCloseClick",
    value: function handleCloseClick(index) {
      var newFileList = this.props.fileList;
      newFileList.splice(index, 1);
      this.props.onChangeFileList(newFileList);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _state = this.state,
          previewVisible = _state.previewVisible,
          previewImage = _state.previewImage;
      var _props = this.props,
          fileList = _props.fileList,
          maxUpload = _props.maxUpload,
          multiple = _props.multiple;

      var uploadButton = _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(_icon2.default, { type: "plus" }),
        _react2.default.createElement(
          "div",
          { className: "ant-upload-text" },
          _reactIntlUniversal2.default.get("editor.uploadBtn")
        )
      );
      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          _upload2.default,
          {
            accept: "image/jpg,image/jpeg,image/png,image/bmp",
            multiple: multiple,
            listType: "picture-card",
            showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
            fileList: fileList,
            customRequest: this.customRequest,
            onPreview: this.handlePreview,
            onChange: this.handleChange
          },
          fileList.length >= maxUpload ? null : uploadButton
        ),
        fileList.map(function (file, index) {
          return _react2.default.createElement("div", {
            className: "upload-close-icon",
            onClick: _this3.handleCloseClick.bind(_this3, index),
            key: file.uid,
            style: {
              left: index % 3 * 112 + 110 + "px",
              top: Math.floor(index / 3) * 112 + 26 + "px"
            }
          });
        }),
        _react2.default.createElement(
          _modal2.default,
          {
            wrapClassName: "upload-img-preview",
            visible: previewVisible,
            footer: null,
            onCancel: this.handleCancel
          },
          _react2.default.createElement(
            _spin2.default,
            { spinning: this.state.loading },
            _react2.default.createElement("img", {
              alt: "upload",
              style: { width: "100%" },
              src: previewImage,
              onLoad: this.onImgLoad,
              onError: this.onImgLoad
            })
          )
        )
      );
    }
  }]);

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

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