前言

最近在做一個(gè)官網(wǎng)，里面需要很多圖片，比較占用資源，打包體積有點(diǎn)大。所以想換成圖片CDN方式，之前寫(xiě)過(guò)一個(gè)類(lèi)似的,是需要后端同事提供接口，正好最近在看node,所以準(zhǔn)備用node實(shí)現(xiàn)一下。

什么是圖片CDN

與傳統(tǒng)的CDN不同，圖片CDN是CDN網(wǎng)絡(luò)的一種應(yīng)用，專(zhuān)門(mén)用于加速圖片的傳輸和加載，當(dāng)使用圖片CDN的時(shí)候，圖片被保存在CDN提供商的服務(wù)器上，并通過(guò)多個(gè)地理位置的邊緣節(jié)點(diǎn)提供服務(wù)。當(dāng)用戶(hù)請(qǐng)求訪問(wèn)這些圖片時(shí)，CDN會(huì)自動(dòng)將圖片傳送到距離用戶(hù)最近的邊緣節(jié)點(diǎn)，從而實(shí)現(xiàn)快速加載和高可用性。

為什么用圖片CDN

1.可以提高網(wǎng)頁(yè)加載速度，因?yàn)閳D片被存儲(chǔ)在離用戶(hù)更近的服務(wù)器上，可以減少網(wǎng)絡(luò)延遲，加快傳輸速度，提高網(wǎng)頁(yè)加載速度。
2.節(jié)省帶寬消耗，CDN可以分擔(dān)原始服務(wù)器的流量壓力，通過(guò)緩存圖片并在需要時(shí)提供服務(wù)，從而減少原始服務(wù)器的帶寬消耗。
3.減輕源服務(wù)器的負(fù)載，將圖片的從源服務(wù)器上轉(zhuǎn)移到CDN服務(wù)器上，減小了打包的體積，減輕了服務(wù)器的壓力。

實(shí)現(xiàn)過(guò)程

這次實(shí)現(xiàn)主要用的是express + cloudinary + node，主要借用了cloudinary，將圖片上傳到cloudinary，

將其中的cloud_name、api_key、api_secret換成自己就行，話(huà)不多說(shuō)直接上代碼

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: '上傳失敗' });
? ? });
});
// 啟動(dòng)應(yīng)用程序
app.listen(3000, () => {
? console.log('應(yīng)用程序已啟動(dòng)');
});

然后在本地啟動(dòng)node服務(wù)就行，通過(guò)postman調(diào)用本地接口，實(shí)現(xiàn)批量上傳

其中的url就是我所需要的，可以直接放在img標(biāo)簽中，替換本地路徑的圖片換成cdn形式圖片

結(jié)語(yǔ)

寫(xiě)這個(gè)服務(wù)的最大目的是為了偷懶，同時(shí)也方便打包減小打包體積，有條件的大佬可以在寫(xiě)一個(gè)上傳頁(yè)面，不用在通過(guò)postman調(diào)用

到此這篇關(guān)于node實(shí)現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)node 批量圖片CDN內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論