[英]Upload images with CKEditor and show img src in html ( editor data ) - Reactjs
Here's how it looks inside the code:下面是它在代码中的样子:
...
<CKEditor
editor={ ClassicEditor }
data={this.state.htmlString}
config={{
ckfinder: {
uploadUrl: 'http://localhost:5000/upload',
}}}
onChange={ ( event, editor ) => {
const data = editor.getData();
this.handleSubjectChange(data);
console.log( { event, editor, data } );
console.log(this.state.htmlString);
} }
/>
...
Inside server.js I am using Multiparty to upload images:在 server.js 中,我使用 Multiparty 上传图片:
...
import express from 'express'
import multiparty from 'connect-multiparty'
const app = express();
const MultipartyMiddleware = multiparty({uploadDir:'src/blogs/images'})
app.post('/upload',MultipartyMiddleware,(req,res)=>{
console.log(req.files.upload)
})
...
From console.log (whole object):从 console.log (整个对象):
Object
data: "<p>sasasa</p><figure class="image"><img></figure>"
editor: rb {_context: En, id: "ef7e9d1eac6bb296e04f9d806d027c180", config: on, plugins: Tn, locale: Sn, …}
event: cn {source: ec, name: "change:data", path: Array(1), stop: ƒ, off: ƒ}
__proto__: Object
Image gets uploaded in the folder:图像被上传到文件夹中:
Issue: I can't get to show img src in editor data问题:我无法在编辑器数据中显示 img src
You can do that by sending a response from the server that contains the path url of the uploaded image.您可以通过从服务器发送包含上传图像的路径 url 的响应来做到这一点。
app.post('/upload',MultipartyMiddleware,(req,res)=>{
var imagePath = req.files.upload.path;
res.status(200).json({
uploaded:true,
url: `${imagePath}`
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.