React使用BraftEditor粘贴图片并上传到阿里云OSS

导入import OSS from 'ali-oss';

  //通过查询资料发现浏览器有监听用户粘贴的原生事件,所以在组件挂载的时候就注册监听,在组件卸载时移除监听。
  componentDidMount() {
    document.addEventListener('paste', this.handlePasteMonitor);
  componentWillUnmount() {
    document.removeEventListener('paste', this.handlePasteMonitor);
  //上传图片
  handlePasteMonitor = (e) => {
    /** 获取剪切板的数据clipboardData */
    var clipboardData = e.clipboardData,
      i = 0,
      items, item, types;
    /** 为空判断 */
    if (clipboardData) {
      items = clipboardData.items;
      if (!items) {
        return;
      item = items[0];
      types = clipboardData.types || [];
      /** 遍历剪切板的数据 */
      for (; i < types.length; i++) {
        if (types[i] === 'Files') {
          item = items[i];
          break;
      /** 判断文件是否为图片 */
      if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
        const file = item.getAsFile();
        let client = new OSS({
          region: 'xxxxxxxxx',
          accessKeyId: t'xxxxxxxxx',
          accessKeySecret: 'xxxxxxxxx',
          stsToken: 'xxxxxxxxx',
          bucket: 'xxxxxxxxx',
        let fileName = 'webManage/' + moment().valueOf() + md5(file.name) + Math.floor(Math.random(0, 100) * 10);
        client.multipartUpload(fileName, file).then(res => {
          //上传阿里云成功,获取文件名走后台接口获取临时路径 访问
          message.success(file.name + '上传成功')
          let src = app.fileUrl + res.name