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

最新推荐文章于 2021-11-22 00:13:08 发布

⑥②

最新推荐文章于 2021-11-22 00:13:08 发布

阅读量275

点赞数

分类专栏：一段代码系列 Nodejs

本文链接：https://blog.csdn.net/lw001x/article/details/106637902

版权

Nodejs 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

一段代码系列

16 篇文章 0 订阅

订阅专栏

前置条件

首先需要配置koa-body来拿到上传文件的内容，可以参考：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编辑，这里没有处理

let writeUpload = async function (uppath,suffix) {
    // 创建可读流
    const reader = fs.createReadStream(uppath);

    var newFilename = await md5name(uppath) + '.' + suffix;
    let filePath = path.join(__dirname, '../public/upload/') + `${newFilename}`;
    // 创建可写流
    const upStream = fs.createWriteStream(filePath);
    // 可读流通过管道写入可写流
    reader.pipe(upStream);

    return newFilename
}

switch (action){
    default:
        var file = ctx.request.files.upfile
        var uppath = file.path
        console.log(uppath)

        let newFilename = await writeUpload(uppath,file.name.split('.')[1])

        ctx.body = {
            "state": "SUCCESS",
            "url": `/upload/${newFilename}`,
            "title": newFilename,
            "original": newFilename,
        }
}