通用评论

Upload.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import React from "react";
  2. import { Upload, Icon, Modal, message } from "antd";
  3. import dayjs from "dayjs";
  4. import shortid from "shortid";
  5. import {
  6. OSS_ENDPOINT,
  7. OSS_BUCKET,
  8. DRIVER_LICENSE_PATH,
  9. ERROR_DEFAULT
  10. } from "../../constant";
  11. import Comment from "../../Comment";
  12. import "./Upload.css";
  13. const client = oss => {
  14. return new window.OSS.Wrapper({
  15. accessKeyId: oss.access_key_id,
  16. accessKeySecret: oss.access_key_secret,
  17. stsToken: oss.security_token,
  18. endpoint: OSS_ENDPOINT, //常量,你可以自己定义
  19. bucket: OSS_BUCKET
  20. });
  21. };
  22. const uploadPath = (path, file) => {
  23. return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
  24. file.type.split("/")[1]
  25. }`;
  26. };
  27. const UploadToOss = (oss, path, file) => {
  28. const url = uploadPath(path, file);
  29. return new Promise((resolve, reject) => {
  30. client(oss)
  31. .multipartUpload(url, file)
  32. .then(data => {
  33. resolve(data);
  34. })
  35. .catch(error => {
  36. reject(error);
  37. });
  38. });
  39. };
  40. class App extends React.Component {
  41. constructor(props) {
  42. super(props);
  43. this.state = {
  44. previewVisible: false,
  45. previewImage: ""
  46. };
  47. this.handleCancel = this.handleCancel.bind(this);
  48. this.handlePreview = this.handlePreview.bind(this);
  49. this.handleChange = this.handleChange.bind(this);
  50. this.customRequest = this.customRequest.bind(this);
  51. }
  52. componentDidMount() {
  53. this.props.app.sOssSts();
  54. }
  55. handleCancel() {
  56. this.setState({ previewVisible: false });
  57. }
  58. handlePreview(file) {
  59. this.setState({
  60. previewImage: file.url || file.thumbUrl,
  61. previewVisible: true
  62. });
  63. }
  64. handleChange({ fileList }) {
  65. this.props.onChangeFileList(fileList);
  66. }
  67. customRequest(info) {
  68. const { file } = info;
  69. info.onProgress({ percent: 10 });
  70. let reader = new FileReader();
  71. reader.readAsDataURL(info.file);
  72. reader.onloadend = () => {
  73. info.onProgress({ percent: 20 });
  74. // DRIVER_LICENSE_PATH oss 的存储路径位置
  75. UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
  76. .then(data => {
  77. info.onProgress({ percent: 100 });
  78. info.onSuccess();
  79. this.props.onUpload({ path: data.name, uid: file.uid });
  80. })
  81. .catch(e => {
  82. message.error(e.message || ERROR_DEFAULT);
  83. info.onError(e);
  84. });
  85. };
  86. }
  87. render() {
  88. const { previewVisible, previewImage } = this.state;
  89. const { fileList, maxUpload } = this.props;
  90. const uploadButton = (
  91. <div>
  92. <Icon type="plus" />
  93. <div className="ant-upload-text">上传</div>
  94. </div>
  95. );
  96. return (
  97. <div>
  98. <Upload
  99. accept="image/jpg,image/jpeg,image/png,image/bmp"
  100. listType="picture-card"
  101. fileList={fileList}
  102. customRequest={this.customRequest}
  103. onPreview={this.handlePreview}
  104. onChange={this.handleChange}
  105. >
  106. {fileList.length >= maxUpload ? null : uploadButton}
  107. </Upload>
  108. <Modal
  109. visible={previewVisible}
  110. footer={null}
  111. onCancel={this.handleCancel}
  112. >
  113. <img alt="upload" style={{ width: "100%" }} src={previewImage} />
  114. </Modal>
  115. </div>
  116. );
  117. }
  118. }
  119. export default Comment(App);