Nodejs 支持上传图片到七牛的百度UMeditor编辑器

Nodejs 支持上传图片到七牛的百度UMeditor编辑器

对百度编辑器作了点小修改，使其可以直接上传图片到七牛云存储。做博客的童鞋可能会用到。

原理

源码目录中的umeditor目录为修改过的UMeditor编辑器（版本为1.2.2，只修改了图片上传功能， 文件为umeditor/dialogs/image.js），在创建编辑器实例前需要定义以下两个全局变量：

  • QINIU_TOKEN 上传文件的upToken
  • QINIU_BUCKET_DOMAIN bucket的域名

以上两个文件通过加载文件/umeditor/qiniu.init.js，由服务器自动生成。在实际使用中可以 不依赖Node.js，只要加载修改过的UMeditor，并自行生成upToken即可。

项目地址：https://github.com/leizongmin/node-umeditor-qiniu


3 回复

Nodejs 支持上传图片到七牛的百度UMeditor编辑器

对百度编辑器作了点小修改，使其可以直接上传图片到七牛云存储。做博客的童鞋可能会用到。

原理

源码目录中的umeditor目录为修改过的UMeditor编辑器（版本为1.2.2，只修改了图片上传功能），在创建编辑器实例前需要定义以下两个全局变量：

  • QINIU_TOKEN：上传文件的upToken
  • QINIU_BUCKET_DOMAIN：bucket的域名

以上两个文件通过加载文件/umeditor/qiniu.init.js，由服务器自动生成。在实际使用中可以不依赖Node.js，只要加载修改过的UMeditor，并自行生成upToken即可。

示例代码

  1. 安装依赖

    首先确保你已经安装了qiniu库来处理七牛云存储的相关操作。你可以通过npm来安装它：

    npm install qiniu

  2. 生成upToken

    在你的Node.js服务器端代码中，你需要生成一个upToken并将其返回给前端。这可以通过调用七牛云的API来完成。

    const qiniu = require('qiniu');

// 设置你的七牛云账号信息
const accessKey = 'your_access_key';
const secretKey = 'your_secret_key';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

// 指定Bucket名称
const bucketName = 'your_bucket_name';

// 创建UploaderToken
const config = new qiniu.conf.Config();
const formUploader = new qiniu.form_up.Uploader(config);
const putPolicy = new qiniu.rs.PutPolicy({ scope: bucketName });
const uploadToken = putPolicy.uploadToken(mac);

// 将upToken返回给前端
res.json({
  upToken: uploadToken
});

  3. 前端配置

    在前端页面中，你需要引入修改后的UMeditor，并加载qiniu.init.js来初始化全局变量。

    <script src="/path/to/umeditor.config.js"></script>
<script src="/path/to/umeditor.min.js"></script>
<script src="/path/to/lang/zh-cn/zh-cn.js"></script>
<script src="/umeditor/qiniu.init.js"></script>

<script>
  window.onload = function () {
    var um = UM.getEditor('myEditor', {
      // 其他UMeditor配置项
    });
  };
</script>

  4. qiniu.init.js

    这个文件需要由服务器动态生成，返回包含QINIU_TOKEN和QINIU_BUCKET_DOMAIN的JSON对象。

    fetch('/api/getUpToken')
  .then(response => response.json())
  .then(data => {
    window.QINIU_TOKEN = data.upToken;
    window.QINIU_BUCKET_DOMAIN = 'http://your-bucket-domain.com';
  });

总结

通过上述步骤，你可以将百度UMeditor与七牛云存储集成，实现图片直接上传的功能。这样不仅可以提高用户体验，还可以简化后端逻辑。希望这些示例代码能帮助你在项目中顺利实现这一功能。


老雷不做又拍云的，不幸福。

差评。

为了实现 Node.js 支持上传图片到七牛的百度 UEditor 编辑器，我们需要对 UEditor 的源码进行一些修改，并确保能够生成所需的 upToken 和 bucket 域名。以下是具体的步骤和示例代码。

修改 UEditor 源码

首先，下载并解压 UEditor 1.2.2 版本，并将修改后的文件放在指定目录中。具体来说，需要修改 umeditor/dialogs/image.js 文件，以便将上传请求发送到七牛。

生成 upToken

我们需要一个后端接口来生成七牛的 upToken。这里使用 Node.js 实现：

const express = require('express');
const qiniu = require('qiniu');

const app = express();

// 设置七牛的 Access Key 和 Secret Key
const accessKey = 'YOUR_ACCESS_KEY';
const secretKey = 'YOUR_SECRET_KEY';

// 创建七牛认证对象
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
  scope: 'your-bucket-name',
};

// 生成 upToken
app.get('/api/token', (req, res) => {
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const uploadToken = putPolicy.uploadToken(mac);
  res.json({ token: uploadToken });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

配置 UEditor

在 umeditor/config.json 文件中添加七牛相关的配置项，例如：

{
  "imageUpload": {
    "imageUrlPrefix": "http://your-bucket-domain/",
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "serverUrl": "/api/upload"
  }
}

修改 image.js

修改 umeditor/dialogs/image.js 文件，以支持七牛的上传功能。关键代码如下：

// 获取 upToken
$.getJSON('/api/token', function(data) {
  var token = data.token;

  // 上传图片
  formData.append('token', token);
  $.ajax({
    url: '/api/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      // 处理响应
    },
    error: function() {
      // 处理错误
    }
  });
});

示例项目

你可以查看完整的示例项目：node-umeditor-qiniu

通过以上步骤，我们实现了使用 Node.js 支持上传图片到七牛的百度 UEditor 编辑器。

回到顶部