如何在React js中不使用草稿js图像组件上传图像

Question

请检查下面的代码，我创建了ImageButton组件并加载了草稿js（编辑器组件）

ImageButton.js

import React from 'react';
import PropTypes from 'prop-types';
import { EditorState, AtomicBlockUtils,convertToRaw,Entity  } from 'draft-js';
import { addNewBlock } from '../../util/model';
import { Block } from '../../util/constants';
import {imageEditorImg} from './../images';
import S3 from 'aws-s3';

var options = {
  accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY,
  secretAccessKey: process.env.REACT_APP_AWS_SECRET_KEY,
  bucketName: process.env.REACT_APP_BUCKET_NAME,
  region: process.env.REACT_APP_REGION,
  dirName: process.env.REACT_APP_DIR_NAME,
}

export default class ImageButton extends React.Component {

  static propTypes = {
    onChange: PropTypes.func,
    editorState: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.input.value = null;
    this.input.click();
  }



  uploadImageCallBack(file) {
    return new Promise(
      (resolve, reject) => {
        const acceptedImageTypes = ['image/gif','image/jpeg','image/jpg','image/png','image/svg'];
        if(acceptedImageTypes.includes(file.type))
        {
            var getFileName = file.name.replace(/ /g,"_");
            var new_file = new File([file], file.lastModified+'_'+getFileName,{
              type: file.type
            });
           var getNewFileName = (file.lastModified+'_'+getFileName).replace(/\.[^/.]+$/, "");

            const S3Client = new S3(options);

            S3Client.uploadFile(new_file,getNewFileName)
            .then((data) => {
               console.log(data.location);

                resolve(data.location)
            })
            .catch((err) => {
                console.log(err)
                reject(err)
            })
        }
        else
        {
          console.log('Validation occured');
              let responseData={
                "data":{
                    "link":'',
                    "type":''
                },
                "status":400,
                "success" : false
            }
            resolve(responseData)
            toast.error(invalidFileFormate);
        }

      }
    );
  }

  addBlockQuote =(e) => {
    const { editorState, onChange } = this.props;
    const file = e.target.files[0];
    if (file.type.indexOf('image/') === 0) {
      console.log(file);
      console.log(editorState);

      const updateData = this.uploadImageCallBack(file);

      updateData.then(function(value) 
        {

            const contentStateWithEntity = Entity.create(
              "image",
              "IMMUTABLE",
              { src: value }
            );


            const contentState = editorState.getCurrentContent();

            const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { src: value });
            const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

            const newEditorState1 = EditorState.set(editorState, {
              currentContent: contentStateWithEntity
            });

            const newEditorState = AtomicBlockUtils.insertAtomicBlock(
              newEditorState1,
              entityKey,
              ' '
            );

            console.log(convertToRaw(editorState.getCurrentContent()), convertToRaw(newEditorState.getCurrentContent()), Entity.get(entityKey));

            onChange(newEditorState);


    }
  }


  render() {
    return (
      <div
        aria-selected = 'false'
        aria-label='rdw-image-control'
        className="rdw-image-wrapper"
        type="button"
        onClick={this.onClick}
        title="Add an Image"
        style={{cursor:'pointer',background:'none',border:'none',padding:'4px',maxWidth:'25px',height:'20px',margin:'4px'}}
      >
        <img alt="Upload image" src={imageEditorImg} />
        <input
          type="file"
          ref={(c) => { this.input = c; }}
          onChange={this.addBlockQuote}
          style={{ display: 'none' }}
        />
      </div>
    );
  }
}

我也使用s3客户端npm上传图像，获得承诺响应后，我在控制台日志中获得了有关已创建实体图的结果，但该图像未在编辑器中呈现（还生成了图形标记，但在该图像标记和图像跨度标记中缺少。

Answer 1

 const contentStateWithEntity = Entity.create(
          "IMAGE", // CASE SENSITIVE
          "IMMUTABLE",
          { src: value }
        );