通用评论

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _modal = require('antd/es/modal');
  6. var _modal2 = _interopRequireDefault(_modal);
  7. var _upload = require('antd/es/upload');
  8. var _upload2 = _interopRequireDefault(_upload);
  9. var _icon = require('antd/es/icon');
  10. var _icon2 = _interopRequireDefault(_icon);
  11. var _message2 = require('antd/es/message');
  12. var _message3 = _interopRequireDefault(_message2);
  13. 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; }; }();
  14. require('antd/es/modal/style/css');
  15. require('antd/es/upload/style/css');
  16. require('antd/es/icon/style/css');
  17. require('antd/es/message/style/css');
  18. var _react = require('react');
  19. var _react2 = _interopRequireDefault(_react);
  20. var _dayjs = require('dayjs');
  21. var _dayjs2 = _interopRequireDefault(_dayjs);
  22. var _shortid = require('shortid');
  23. var _shortid2 = _interopRequireDefault(_shortid);
  24. var _constant = require('../../constant');
  25. var _Comment = require('../../Comment');
  26. var _Comment2 = _interopRequireDefault(_Comment);
  27. require('./Upload.css');
  28. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  29. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  30. 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; }
  31. 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; }
  32. var client = function client(oss) {
  33. return new window.OSS.Wrapper({
  34. accessKeyId: oss.access_key_id,
  35. accessKeySecret: oss.access_key_secret,
  36. stsToken: oss.security_token,
  37. endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
  38. bucket: _constant.OSS_BUCKET
  39. });
  40. };
  41. var uploadPath = function uploadPath(path, file) {
  42. return path + '/' + (0, _dayjs2.default)().format('YYYYMMDD') + '/' + _shortid2.default.generate() + '.' + file.type.split('/')[1];
  43. };
  44. var UploadToOss = function UploadToOss(oss, path, file) {
  45. var url = uploadPath(path, file);
  46. return new Promise(function (resolve, reject) {
  47. client(oss).multipartUpload(url, file).then(function (data) {
  48. resolve(data);
  49. }).catch(function (error) {
  50. reject(error);
  51. });
  52. });
  53. };
  54. var App = function (_React$Component) {
  55. _inherits(App, _React$Component);
  56. function App(props) {
  57. _classCallCheck(this, App);
  58. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  59. _this.state = {
  60. previewVisible: false,
  61. previewImage: ''
  62. };
  63. _this.handleCancel = _this.handleCancel.bind(_this);
  64. _this.handlePreview = _this.handlePreview.bind(_this);
  65. _this.handleChange = _this.handleChange.bind(_this);
  66. _this.customRequest = _this.customRequest.bind(_this);
  67. return _this;
  68. }
  69. _createClass(App, [{
  70. key: 'componentDidMount',
  71. value: function componentDidMount() {
  72. this.props.app.sOssSts();
  73. }
  74. }, {
  75. key: 'handleCancel',
  76. value: function handleCancel() {
  77. this.setState({ previewVisible: false });
  78. }
  79. }, {
  80. key: 'handlePreview',
  81. value: function handlePreview(file) {
  82. this.setState({
  83. previewImage: file.url || file.thumbUrl,
  84. previewVisible: true
  85. });
  86. }
  87. }, {
  88. key: 'handleChange',
  89. value: function handleChange(_ref) {
  90. var fileList = _ref.fileList;
  91. this.props.onChangeFileList(fileList);
  92. }
  93. }, {
  94. key: 'customRequest',
  95. value: function customRequest(info) {
  96. var _this2 = this;
  97. var file = info.file;
  98. info.onProgress({ percent: 10 });
  99. var reader = new FileReader();
  100. reader.readAsDataURL(info.file);
  101. reader.onloadend = function () {
  102. info.onProgress({ percent: 20 });
  103. // DRIVER_LICENSE_PATH oss 的存储路径位置
  104. UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
  105. info.onProgress({ percent: 100 });
  106. info.onSuccess();
  107. _this2.props.onUpload({ path: data.name, uid: file.uid });
  108. }).catch(function (e) {
  109. _message3.default.error(e.message || _constant.ERROR_DEFAULT);
  110. info.onError(e);
  111. });
  112. };
  113. }
  114. }, {
  115. key: 'render',
  116. value: function render() {
  117. var _state = this.state,
  118. previewVisible = _state.previewVisible,
  119. previewImage = _state.previewImage;
  120. var _props = this.props,
  121. fileList = _props.fileList,
  122. maxUpload = _props.maxUpload;
  123. var uploadButton = _react2.default.createElement(
  124. 'div',
  125. null,
  126. _react2.default.createElement(_icon2.default, { type: 'plus' }),
  127. _react2.default.createElement(
  128. 'div',
  129. { className: 'ant-upload-text' },
  130. '\u4E0A\u4F20'
  131. )
  132. );
  133. return _react2.default.createElement(
  134. 'div',
  135. null,
  136. _react2.default.createElement(
  137. _upload2.default,
  138. {
  139. accept: 'image/jpg,image/jpeg,image/png,image/bmp',
  140. listType: 'picture-card',
  141. fileList: fileList,
  142. customRequest: this.customRequest,
  143. onPreview: this.handlePreview,
  144. onChange: this.handleChange
  145. },
  146. fileList.length >= maxUpload ? null : uploadButton
  147. ),
  148. _react2.default.createElement(
  149. _modal2.default,
  150. {
  151. visible: previewVisible,
  152. footer: null,
  153. onCancel: this.handleCancel
  154. },
  155. _react2.default.createElement('img', { alt: 'upload', style: { width: '100%' }, src: previewImage })
  156. )
  157. );
  158. }
  159. }]);
  160. return App;
  161. }(_react2.default.Component);
  162. exports.default = (0, _Comment2.default)(App);
  163. //# sourceMappingURL=Upload.js.map