一段代码，nodejs的koa集成ueditor的上传图片文件功能

我不是女神ヾ 2023-02-16 06:56 39阅读 0赞

## 前置条件 ##

> 首先需要配置koa-body来拿到上传文件的内容，可以参考：[https://blog.csdn.net/lw001x/article/details/106565449][https_blog.csdn.net_lw001x_article_details_106565449]

## 使用ueditor ##

这里就直接拿官网的demo代码上来意思一下。

<!DOCTYPE HTML>
    <html lang="en-US">
    
    <head>
        <meta charset="UTF-8">
        <title>ueditor demo</title>
    </head>
    
    <body>
        
        <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
        </script>
        
        <script type="text/javascript" src="ueditor.config.js"></script>
        
        <script type="text/javascript" src="ueditor.all.js"></script>
        
        <script type="text/javascript">
            var ue = UE.getEditor('container');
        </script>
    </body>
    
    </html>

## ueditor.config.js ##

这里的配置文件就是前端使用的一个配置文件，配置服务器url等参数。

这里只需要找到 **serverUrl** 参数，将其配置成koa路由接收上传文件的一个路由地址就可以了。

## Koa请求路由配置 ##

ueditor上传图片文件需要两个请求，一个get请求和一个post请求，get请求是用来验证上传服务是否可用，返回的是一个json串，我们可以使用ueditor下载包中含有的服务器端的一个config文件，可以直接拷贝过来。

### GET请求地址的路由 ###

ueditor.config.json是在下载的ueditor包里的任意一个后台文件里找到的

let file = fs.readFileSync(path.join(ctx.rootPath,'config','ueditor.config.json'))
    ctx.body = file.toString()

### POST请求地址的路由 ###

这里的内容与上传文件的内容是一样的，只不过上传文件的名称可以在后台的配置文件中修改，这里只处理的上传图片或文件的逻辑。

复制网络图片上传的功能，也可以使用基本的上传功能，需要修改前端的ueditor配置文件中的 catchRemoteImageEnable 参数，将其设置成true，这样我们就可以直接使用基本的上传文件来处理网络文件了。

涂鸦上传，是一串base64编辑，这里没有处理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_lw001x_article_details_106565449]: https://blog.csdn.net/lw001x/article/details/106565449
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609124512366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70