comment/src/components/Editor/Upload.js

import React from "react";
import { Upload, Icon, Modal, message, Spin } from "antd";
import dayjs from "dayjs";
import shortid from "shortid";
import intl from "react-intl-universal";
import {
  OSS_ENDPOINT,
  OSS_BUCKET,
  DRIVER_LICENSE_PATH,
  ERROR_DEFAULT
} from "../../constant";
import Comment from "../../Comment";
import "./Upload.css";

const client = oss => {
  return new window.OSS.Wrapper({
    accessKeyId: oss.access_key_id,
    accessKeySecret: oss.access_key_secret,
    stsToken: oss.security_token,
    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
    bucket: OSS_BUCKET
  });
};

const uploadPath = (path, file) => {
  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
    file.type.split("/")[1]
  }`;
};

const UploadToOss = (oss, path, file) => {
  const url = uploadPath(path, file);
  return new Promise((resolve, reject) => {
    client(oss)
      .multipartUpload(url, file)
      .then(data => {
        resolve(data);
      })
      .catch(error => {
        reject(error);
      });
  });
};

class App extends React.Component {
  constructor(props) {
    super(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);
  }

  componentDidMount() {
    this.props.app.sOssSts();
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  onImgLoad() {
    this.setState({
      loading: false
    });
  }

  handleCancel() {
    this.setState({ previewVisible: false });
  }

  handlePreview(file) {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true
    });
  }

  handleChange({ fileList }) {
    this.props.onChangeFileList(fileList);
  }

  customRequest(info) {
    const { file } = info;
    info.onProgress({ percent: 10 });
    let reader = new FileReader();
    reader.readAsDataURL(info.file);
    reader.onloadend = () => {
      info.onProgress({ percent: 20 });
      // DRIVER_LICENSE_PATH oss 的存储路径位置
      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
        .then(data => {
          info.onProgress({ percent: 100 });
          info.onSuccess(data);
          this.props.onUpload({ path: data.name, uid: file.uid });
        })
        .catch(e => {
          const msg = e.message || ERROR_DEFAULT;
          if (this.props.showError) {
            message.error(msg);
          }
          if (this.props.onError) {
            this.props.onError(msg, { response: e.response });
          }
          info.onError(e);
        });
    };
  }

  handleCloseClick(index) {
    let newFileList = this.props.fileList;
    newFileList.splice(index, 1);
    this.props.onChangeFileList(newFileList);
  }

  render() {
    const { previewVisible, previewImage } = this.state;
    const { fileList, maxUpload, multiple } = this.props;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">{intl.get("editor.uploadBtn")}</div>
      </div>
    );
    return (
      <div>
        <Upload
          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}
        </Upload>
        {fileList.map((file, index) => {
          return (
            <div
              className="upload-close-icon"
              onClick={this.handleCloseClick.bind(this, index)}
              key={file.uid}
              style={{
                left: `${(index % 3) * 112 + 98}px`,
                top: `${Math.floor(index / 3) * 112 + 16}px`
              }}
            />
          );
        })}
        <Modal
          wrapClassName="upload-img-preview"
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <Spin spinning={this.state.loading}>
            <img
              alt="upload"
              style={{ width: "100%" }}
              src={previewImage}
              onLoad={this.onImgLoad}
              onError={this.onImgLoad}
            />
          </Spin>
        </Modal>
      </div>
    );
  }
}

export default Comment(App);