node实现图片上传到本地服务器（自定义文件夹参数）& 上传到七牛云，且压缩处理

2022-10-13

node实现图片上传到本地服务器（自定义文件夹参数）& 上传到七牛云，且压缩处理

/**
 * 接口文件  imgUpload.js
 */

const express = require('express');
const fs = require('fs')
const router = express.Router();
const multer = require('multer');
const path = require("path");
const tinify = require('tinify');
tinify.key = '**************'; // 在tinify官网申请
var upImg = require('../../../utils/uploadToQiniu')
var resJson = require('../../../utils/resJson')   //  我自己封装的接口返回


// 单张图片上传图片地址
const IMAGES_PATH = path.resolve(__dirname, `../../../public/images/public`);

// 单个图片上传
let upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './public/images/public/');
        },
        filename: function (req, file, cb) {
            var changedName = (new Date().getTime()) + '-' + file.originalname;
            cb(null, changedName);
        }
    })
});

//单个图片上传  -图片存在服务器本地
router.post('/toLocal', upload.single('image'), async (req, res) => {
    try {
        let folderName = req.body.folderName //  参数中传过来的“文件夹”参数，判断图片存储路径下是否存在文件夹，没有的话会创建然后存入
        let filePath = IMAGES_PATH + '/' + folderName
        let isExists = await fs.existsSync(filePath)
        if (isExists) {
            // 文件夹是存在的
            // 移动文件
            rename(req.file.filename, folderName)
        } else {
            // 文件夹不存在，先创建文件夹
            fs.mkdir(filePath, function (err) {
                if (err) {
                    console.log(err);
                }
                console.log(folderName + ' mkdir success');
                // 再移动文件
                rename(req.file.filename, folderName)
            })
        }
        resJson.success(res, {
            imgUrl: 'images/public/' + folderName + '/' + req.file.filename
        }, '图片上传成功')
    } catch (err) {
        resJson.error(res, err, '图片上传失败')
    }
});

//单个图片上传   -图片上传到七牛云
router.post('/toQiNiu', upload.single('image'), async (req, res) => {
    try {
        const url = await upImg(req.file)
        console.log(url);
        resJson.success(res, {
            imgUrl: url
        }, "图片上传成功")
    } catch (err) {
        resJson.error(res, err, '图片上传失败')
    }
})

// 操作图片压缩的  tinify
const compress = (trueName) => {
    var sourse = tinify.fromFile(trueName); //输入文件
    sourse.toFile(trueName, (err) => {
        console.log(trueName + ' 图片压缩成功');
    }); //输出文件
}
// 操作图片移动的
const rename = (fileName, folderName) => {
    let oldName = IMAGES_PATH + '/' + fileName
    let newName = IMAGES_PATH + '/' + folderName + '/' + fileName
    fs.rename(oldName, newName, (err) => {
        if (err) {
            console.log(err);
        }
        console.log(fileName + ' rename success')
        // 再执行压缩图片文件
        compress(newName)
    })
}

module.exports = router;

/*
 * uploadToQiniu.js
 * 此处返回的图片地址是完整的七牛云存储地址，并且是带了七牛云的图片格式处理参数的
 */
const qiniu = require('qiniu');
const fs = require('fs');
const {
    accessKey,
    secretKey,
    bucket,
    url
} = require("../config/qiniuConfig.json");
const config = {
    accessKey,
    secretKey,
    bucket,
    url
}

const qn = {}

//构建上传策略函数   （获取七牛上传token）
function uptoken(bucket) {
    // 创建鉴权对象
    const accessKey = config.accessKey;
    const secretKey = config.secretKey;
    const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    // 创建上传凭证
    const putPolicy = new qiniu.rs.PutPolicy({
        scope: bucket
    });

    const uploadToken = putPolicy.uploadToken(mac);
    return uploadToken;
}


async function upImg(file) {
    return new Promise((resolve, reject) => {
        const token = uptoken(bucket); //生成上传 Token
        const key = file.filename; //上传到七牛后保存的文件名
        const filePath = file.path; //要上传文件的本地路径
        const putExtra = new qiniu.form_up.PutExtra();
        // 文件上传（以下四行代码都是七牛上传文件的配置设置）
        const qiNiuConfig = new qiniu.conf.Config();
        qiNiuConfig.zone = qiniu.zone.Zone_z2; //设置传输机房的位置，华南机房
        const formUploader = new qiniu.form_up.FormUploader(qiNiuConfig);
        formUploader.putFile(token, key, filePath, putExtra, function (respErr, respBody, respInfo) {
            if (respErr) {
                reject(respErr)
            } else {
                if (respInfo.statusCode == 200) { //上传成功
                    fs.unlink(filePath, (err) => { //删除本地图片
                        if (err) {
                            console.log(err);
                        }
                        console.log('删除文件成功')
                    })
                    const {
                        key
                    } = respBody
                    resolve(`${url}/${key}?imageView2/0/q/80|imageslim`)

                } else { //上传失败
                    console.log(respInfo.statusCode);
                    console.log(respBody);
                }
            }

        })
    })

}


module.exports = upImg;

/*
 * 七牛云所需要的参数   qiniuConfig.json
 */
{
    "accessKey": "",  // 七牛云-个人中心-密钥管理，获取
    "secretKey": "",  // 七牛云-个人中心-密钥管理，获取
    "bucket": "",  //  七牛云存储空间的名字
    "url": ""     // 七牛云中自定义的域名
}

需要注意的点：

七牛云创建的空间需要是公共空间，如果是私有空间，访问是需要一个两个参数的，不方便存储在服务器上，由于我的存储空间是很久之前创建的，忘记了改，用自定义域名+文件名访问不到，询问了技术支持才明白过来。改成公共空间就好了。
七牛云支持自定义图片格式处理，方式就是在图片链接后面加上参数就可以了，但是注意在加速域名中的”缓存配置”的”忽略URL参数”不要开启，如果开启了，图片格式处理也会没有效果

本文作者：人模人样的搬砖老段
本文链接：node实现图片上传到本地服务器（自定义文件夹参数）& 上传到七牛云，且压缩处理
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2022/10/13