返回

新手笔记——node图片压缩和七牛上传

前端

前言

对于日常的工作,我们常常需要对图片进行处理,例如压缩、上传等。本文将介绍如何使用Node.js实现图片压缩并上传到七牛云存储。

项目初始化

首先,我们需要初始化一个Node.js项目。可以在终端中使用以下命令创建一个新的项目:

mkdir my-project
cd my-project
npm init -y

接下来,我们需要安装必要的依赖。我们可以使用以下命令安装它们:

npm install sharp
npm install multer
npm install qiniu

确定图片压缩接口的请求参数

接下来,我们需要确定图片压缩接口的请求参数。七牛云存储提供了丰富的图片处理功能,我们可以根据需要选择合适的参数。

这里列举一些常用的参数:

  • mode : 指定压缩模式,可以是best_quality, good_quality, balanced, fast等。
  • quality : 指定压缩质量,范围从0到100。
  • width : 指定压缩后的图片宽度。
  • height : 指定压缩后的图片高度。

定义辅助方法

为了方便代码的组织和重用,我们可以定义一些辅助方法。例如,我们可以定义一个函数来获取图片的二进制数据:

const getBuffer = (filePath) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

设置默认配置

为了方便使用,我们可以设置一些默认配置。例如,我们可以设置默认的压缩质量和压缩模式:

const defaultOptions = {
  quality: 80,
  mode: 'good_quality',
};

上传图片

现在,我们已经准备好了上传图片。我们可以使用以下步骤来实现:

  1. 首先,我们需要将图片二进制数据上传到七牛云存储。我们可以使用以下代码来实现:
const uploadFile = async (buffer, key) => {
  return new Promise((resolve, reject) => {
    const putExtra = new qiniu.form_up.PutExtra();
    qiniu.form_up.put(token, key, buffer, putExtra, (err, res, info) => {
      if (err) {
        reject(err);
      } else {
        resolve(info);
      }
    });
  });
};
  1. 其次,我们需要将图片压缩并上传到七牛云存储。我们可以使用以下代码来实现:
const compressAndUpload = async (filePath, key) => {
  const buffer = await getBuffer(filePath);
  const compressedBuffer = await sharp(buffer).resize(1280, 720).toBuffer();
  const info = await uploadFile(compressedBuffer, key);
  return info;
};

代码示例

以下是一个完整的代码示例:

const sharp = require('sharp');
const multer = require('multer');
const qiniu = require('qiniu');

const storage = multer.diskStorage({
  destination: 'original/',
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const upload = multer({ storage: storage });

const defaultOptions = {
  quality: 80,
  mode: 'good_quality',
};

const getBuffer = (filePath) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

const uploadFile = async (buffer, key) => {
  return new Promise((resolve, reject) => {
    const putExtra = new qiniu.form_up.PutExtra();
    qiniu.form_up.put(token, key, buffer, putExtra, (err, res, info) => {
      if (err) {
        reject(err);
      } else {
        resolve(info);