步骤
1. 编写接口
特别注意的,ueditor请求分为两块,get请求传递action,post请求传递上传所需参数,在写接口时应写为use
1 | router.use( '/ue/upload' , api.Upload.ueditorUpload) |
2. 获取action
1 | let ActionType = req.query.action |
3. 根据action值做对应操作
config
初始化ue组件时客户端会发起get请求传送参数action=config, 服务端需返回config.json配置
(ps:config.json记得去除所有注释)
1 2 3 4 5 6 7 8 9 | let preUrl = 'http://' + FDFS_PATH.host + ':' + FDFS_PATH.port + '/' $config.imageUrlPrefix = preUrl $config.scrawlUrlPrefix = preUrl $config.snapscreenUrlPrefix = preUrl $config.catcherUrlPrefix = preUrl $config.videoUrlPrefix = preUrl $config.fileUrlPrefix = preUrl $config.imageManagerUrlPrefix = preUrl $config.fileManagerUrlPrefix = preUrl |
上述代码为修改config.json配置中图片访问前缀,根据fdfs返回参数修改,后期优化时,在fdfs返回的图片url已是全路径拼接,故此处可不作设置。
拼接回显图片的代码在客户端的ueditor.all.js文件中callback回调方法中,可根据需要修改。
uploadimage
单图及多图上传皆发起post请求传送参数action=uploadimage,服务端使用fdfs客户端上传图片需返回对应参数(返回参数设置按照ueditor官方文档给出)
主要代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /** * UE上传 * @param req * @param res * @param next */ async ueditorUpload(req, res, next) { let ActionType = req.query.action let result = '' switch (ActionType) { case 'config' : default : res.setHeader( 'Content-Type' , 'application/json' ) result = ueditorConfig break case 'uploadimage' : result = await new Upload().upload(req, res, next, 1) result = { "state" : "SUCCESS" , "url" : result.data.file, "title" : result.data.name, "original" : result.data.name } res.setHeader( 'Content-Type' , 'text/html' ) break case 'uploadfile' : result = await new Upload().upload(req, res, next, 2) result = { "state" : "SUCCESS" , "url" : result.data.file, "title" : result.data.name, "original" : result.data.name } res.setHeader( 'Content-Type' , 'text/html' ) break case 'uploadvideo' : console.log( 'uploadvideo start' ) break } res.send(result) } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
2020-01-04 jetbrains产品(WebStorm、idea、pycharm) 最新激活码