React Draft Wysiwyg: 点击“添加”按钮时上传图片

Question

在一个React.js应用程序中，我尝试使用https://jpuri.github.io/react-draft-wysiwyg/#/docs编辑器上传图像并将其嵌入到编辑器的内容中。

目前为止，我使用以下代码实现了这一点：

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import {convertFromRaw, convertToRaw, EditorState} from 'draft-js';    
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
import "../../node_modules/draft-js-image-plugin/lib/plugin.css"



export default class CustomEditor extends Component {

  uploadCallback(file) {

    return new Promise(
      (resolve, reject) => {
        var reader=new FileReader();

        reader.onloadend = function() {
          Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,(err,response)=>{
              console.log(response)
             if(err){
               reject(err)
             }

             resolve({ data: { link: response.data.url } });
          })
        }

        reader.readAsDataURL(file);
      }
    );
  }

  render() {

    const config={
      image: { uploadCallback: this.uploadCallback }
    }

    return (
      <div className="container-fluid">
        <Editor toolbar={ config } />
      </div>
    )
  }
}

但我的问题是，当我选择文件时，图像上传过程会启动，我希望在单击下面图片中的“添加”按钮时启动上传过程：。那么我该怎么做呢？

- Dimitrios Desyllas

Answer 1

无法更改此行为。

您唯一可以提供的选项是uploadCallback，请参见文档。

您可以在此处找到上传代码的源代码，它很清楚，无法更改此行为。

- Tieme

Answer 2

在编辑器工具栏中使用工具栏props——toolbar={image: { uploadCallback: uploadCallback }}, 并编写以下类似的uploadCallback函数。

const uploadCallback = (file, callback) => {
    console.log(file);
    return new Promise((resolve, reject) => {
      const reader = new window.FileReader();
      console.log(reader);
      reader.onloadend = async () => {
        const form_data = new FormData();
        form_data.append("file", file);
        const res = await uploadFile(form_data);
        setValue("thumbnail", res.data);
        resolve({ data: { link: process.env.REACT_APP_API + res.data } });
      };
      reader.readAsDataURL(file);
    });
  };

  const config = {
    image: { uploadCallback: uploadCallback },
  };

<Editor
  toolbar={config}
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={onEditorStateChange}
  placeholder="Write your comment here"
/>

- Akash Amar