通用评论 vedio

Upload.js 3.3KB

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