返回
新手笔记——node图片压缩和七牛上传
前端
2023-09-15 22:28:01
前言
对于日常的工作,我们常常需要对图片进行处理,例如压缩、上传等。本文将介绍如何使用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',
};
上传图片
现在,我们已经准备好了上传图片。我们可以使用以下步骤来实现:
- 首先,我们需要将图片二进制数据上传到七牛云存储。我们可以使用以下代码来实现:
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);
}
});
});
};
- 其次,我们需要将图片压缩并上传到七牛云存储。我们可以使用以下代码来实现:
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);