目录
前言
最近在做一个官网,里面需要很多图片,比较占用资源,打包体积有点大。所以想换成图片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形式图片
结语
写这个服务的最大目的是为了偷懒,同时也方便打包减小打包体积,有条件的大佬可以在写一个上传页面,不用在通过postman调用