通用评论

Upload.js 8.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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 _spin = require("antd/es/spin");
  8. var _spin2 = _interopRequireDefault(_spin);
  9. var _upload = require("antd/es/upload");
  10. var _upload2 = _interopRequireDefault(_upload);
  11. var _icon = require("antd/es/icon");
  12. var _icon2 = _interopRequireDefault(_icon);
  13. var _message2 = require("antd/es/message");
  14. var _message3 = _interopRequireDefault(_message2);
  15. 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; }; }();
  16. require("antd/es/modal/style");
  17. require("antd/es/spin/style");
  18. require("antd/es/upload/style");
  19. require("antd/es/icon/style");
  20. require("antd/es/message/style");
  21. var _react = require("react");
  22. var _react2 = _interopRequireDefault(_react);
  23. var _dayjs = require("dayjs");
  24. var _dayjs2 = _interopRequireDefault(_dayjs);
  25. var _shortid = require("shortid");
  26. var _shortid2 = _interopRequireDefault(_shortid);
  27. var _reactIntlUniversal = require("react-intl-universal");
  28. var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
  29. var _constant = require("../../constant");
  30. var _Comment = require("../../Comment");
  31. var _Comment2 = _interopRequireDefault(_Comment);
  32. require("./Upload.css");
  33. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  34. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  35. 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; }
  36. 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; }
  37. var client = function client(oss) {
  38. return new window.OSS.Wrapper({
  39. accessKeyId: oss.access_key_id,
  40. accessKeySecret: oss.access_key_secret,
  41. stsToken: oss.security_token,
  42. endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
  43. bucket: _constant.OSS_BUCKET
  44. });
  45. };
  46. var uploadPath = function uploadPath(path, file) {
  47. return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
  48. };
  49. var UploadToOss = function UploadToOss(oss, path, file) {
  50. var url = uploadPath(path, file);
  51. return new Promise(function (resolve, reject) {
  52. client(oss).multipartUpload(url, file).then(function (data) {
  53. resolve(data);
  54. }).catch(function (error) {
  55. reject(error);
  56. });
  57. });
  58. };
  59. var App = function (_React$Component) {
  60. _inherits(App, _React$Component);
  61. function App(props) {
  62. _classCallCheck(this, App);
  63. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  64. _this.state = {
  65. previewVisible: false,
  66. previewImage: "",
  67. loading: false
  68. };
  69. _this.handleCancel = _this.handleCancel.bind(_this);
  70. _this.handlePreview = _this.handlePreview.bind(_this);
  71. _this.handleChange = _this.handleChange.bind(_this);
  72. _this.customRequest = _this.customRequest.bind(_this);
  73. _this.handleCloseClick = _this.handleCloseClick.bind(_this);
  74. _this.onImgLoad = _this.onImgLoad.bind(_this);
  75. return _this;
  76. }
  77. _createClass(App, [{
  78. key: "componentDidMount",
  79. value: function componentDidMount() {
  80. this.props.app.sOssSts();
  81. if (this.props.onRef) {
  82. this.props.onRef(this);
  83. }
  84. }
  85. }, {
  86. key: "onImgLoad",
  87. value: function onImgLoad() {
  88. this.setState({
  89. loading: false
  90. });
  91. }
  92. }, {
  93. key: "handleCancel",
  94. value: function handleCancel() {
  95. this.setState({ previewVisible: false });
  96. }
  97. }, {
  98. key: "handlePreview",
  99. value: function handlePreview(file) {
  100. this.setState({
  101. previewImage: file.url || file.thumbUrl,
  102. previewVisible: true
  103. });
  104. }
  105. }, {
  106. key: "handleChange",
  107. value: function handleChange(_ref) {
  108. var fileList = _ref.fileList;
  109. this.props.onChangeFileList(fileList);
  110. }
  111. }, {
  112. key: "customRequest",
  113. value: function customRequest(info) {
  114. var _this2 = this;
  115. var file = info.file;
  116. info.onProgress({ percent: 10 });
  117. var reader = new FileReader();
  118. reader.readAsDataURL(info.file);
  119. reader.onloadend = function () {
  120. info.onProgress({ percent: 20 });
  121. // DRIVER_LICENSE_PATH oss 的存储路径位置
  122. UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
  123. info.onProgress({ percent: 100 });
  124. info.onSuccess(data);
  125. _this2.props.onUpload({ path: data.name, uid: file.uid });
  126. }).catch(function (e) {
  127. var msg = e.message || _constant.ERROR_DEFAULT;
  128. if (_this2.props.showError) {
  129. _message3.default.error(msg);
  130. }
  131. if (_this2.props.onError) {
  132. _this2.props.onError(msg, { response: e.response });
  133. }
  134. info.onError(e);
  135. });
  136. };
  137. }
  138. }, {
  139. key: "handleCloseClick",
  140. value: function handleCloseClick(index) {
  141. var newFileList = this.props.fileList;
  142. newFileList.splice(index, 1);
  143. this.props.onChangeFileList(newFileList);
  144. }
  145. }, {
  146. key: "render",
  147. value: function render() {
  148. var _this3 = this;
  149. var _state = this.state,
  150. previewVisible = _state.previewVisible,
  151. previewImage = _state.previewImage;
  152. var _props = this.props,
  153. fileList = _props.fileList,
  154. maxUpload = _props.maxUpload,
  155. multiple = _props.multiple;
  156. var uploadButton = _react2.default.createElement(
  157. "div",
  158. null,
  159. _react2.default.createElement(_icon2.default, { type: "plus" }),
  160. _react2.default.createElement(
  161. "div",
  162. { className: "ant-upload-text" },
  163. _reactIntlUniversal2.default.get("editor.uploadBtn")
  164. )
  165. );
  166. return _react2.default.createElement(
  167. "div",
  168. null,
  169. _react2.default.createElement(
  170. _upload2.default,
  171. {
  172. accept: "image/jpg,image/jpeg,image/png,image/bmp",
  173. multiple: multiple,
  174. listType: "picture-card",
  175. showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
  176. fileList: fileList,
  177. customRequest: this.customRequest,
  178. onPreview: this.handlePreview,
  179. onChange: this.handleChange
  180. },
  181. fileList.length >= maxUpload ? null : uploadButton
  182. ),
  183. fileList.map(function (file, index) {
  184. return _react2.default.createElement("div", {
  185. className: "upload-close-icon",
  186. onClick: _this3.handleCloseClick.bind(_this3, index),
  187. key: file.uid,
  188. style: {
  189. left: index % 3 * 112 + 110 + "px",
  190. top: Math.floor(index / 3) * 112 + 26 + "px"
  191. }
  192. });
  193. }),
  194. _react2.default.createElement(
  195. _modal2.default,
  196. {
  197. wrapClassName: "upload-img-preview",
  198. visible: previewVisible,
  199. footer: null,
  200. onCancel: this.handleCancel
  201. },
  202. _react2.default.createElement(
  203. _spin2.default,
  204. { spinning: this.state.loading },
  205. _react2.default.createElement("img", {
  206. alt: "upload",
  207. style: { width: "100%" },
  208. src: previewImage,
  209. onLoad: this.onImgLoad,
  210. onError: this.onImgLoad
  211. })
  212. )
  213. )
  214. );
  215. }
  216. }]);
  217. return App;
  218. }(_react2.default.Component);
  219. exports.default = (0, _Comment2.default)(App);
  220. //# sourceMappingURL=Upload.js.map