[英]React Draft Wysiwyg: Image Upload when I click the "Add" Button
在 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>
)
}
}
但我的问题是当我选择文件时图像上传过程被启动,当我点击“添加”按钮时我想启动上传过程,如下图所示:
那我该怎么做呢?
在编辑器工具栏={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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.