用CKEditor上传图像，并在html (编辑器数据)- Reactjs中显示img src
用CKEditor上传图像，并在html (编辑器数据)- Reactjs中显示img src
提问于 2020-07-06 12:22:42
下面是它在代码中的表现：
...
<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);
} }
/>
...在server.js内部，我使用多方上传图片：
...
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)
})
...
来自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图像上传到文件夹中：
问题:我无法在编辑器数据中显示img src
回答 1
Stack Overflow用户
发布于 2020-09-09 12:23:37
您可以通过从包含上传图像路径url的服务器发送响应来做到这一点。
app.post('/upload',MultipartyMiddleware,(req,res)=>{
var imagePath = req.files.upload.path;
res.status(200).json({
uploaded:true,
url: `${imagePath}`
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62756002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号