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>
    )
  }
}

但我的問題是當我選擇文件時圖像上傳過程被啟動，當我點擊“添加”按鈕時我想啟動上傳過程，如下圖所示：

那我該怎么做呢？

Answer 1

不能更改此行為。

您可以提供的唯一選項是uploadCallback ，請參閱文檔 。

您可以在此處找到上傳代碼的來源，這很清楚，這是不可能的。

Answer 2

在編輯器工具欄={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" />