node实现批量上传本地图片转为图片CDN的项目实践

技术交流
2024-10-01 11:16:02

前言

最近在做一个官网，里面需要很多图片，比较占用资源，打包体积有点大。所以想换成图片CDN方式，之前写过一个类似的,是需要后端同事提供接口，正好最近在看node,所以准备用node实现一下。

什么是图片CDN

与传统的CDN不同，图片CDN是CDN网络的一种应用，专门用于加速图片的传输和加载，当使用图片CDN的时候，图片被保存在CDN提供商的服务器上，并通过多个地理位置的边缘节点提供服务。当用户请求访问这些图片时，CDN会自动将图片传送到距离用户最近的边缘节点，从而实现快速加载和高可用性。

为什么用图片CDN

1.可以提高网页加载速度，因为图片被存储在离用户更近的服务器上，可以减少网络延迟，加快传输速度，提高网页加载速度。
2.节省带宽消耗，CDN可以分担原始服务器的流量压力，通过缓存图片并在需要时提供服务，从而减少原始服务器的带宽消耗。
3.减轻源服务器的负载，将图片的从源服务器上转移到CDN服务器上，减小了打包的体积，减轻了服务器的压力。

实现过程

这次实现主要用的是express + cloudinary + node，主要借用了cloudinary，将图片上传到cloudinary，

将其中的cloud_name、api_key、api_secret换成自己就行，话不多说直接上代码

const express = require('express');
const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const app = express();
// 配置Multer中间件
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 指定上传文件保存的目录
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname); // 使用原始文件名保存上传文件
  }
});
const upload = multer({ storage });
// 配置Cloudinary
cloudinary.config({ 
    cloud_name: '*********', 
    api_key: '*********', 
    api_secret: '*********'  
  });
// 处理文件上传
app.post('/upload', upload.array('images', 10), (req, res) => {
  const files = req.files;
  const uploadPromises = [];
  // 遍历所有上传的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const uploadPromise = new Promise((resolve, reject) => {
      cloudinary.uploader.upload(file.path, (error, result) => {
        if (error) {
          reject(error);
        } else {
          resolve(result);
        }
      });
    });
    uploadPromises.push(uploadPromise);
  }
  // 等待所有文件上传完成
  Promise.all(uploadPromises)
    .then(results => {
      res.json(results);
    })
    .catch(error => {
      res.status(500).json({ error: '上传失败' });
    });
});
// 启动应用程序
app.listen(3000, () => {
  console.log('应用程序已启动');
});

然后在本地启动node服务就行，通过postman调用本地接口，实现批量上传

其中的url就是我所需要的，可以直接放在img标签中，替换本地路径的图片换成cdn形式图片