目錄前言什么是圖片CDN為什么用圖片CDN實(shí)現(xiàn)過程結(jié)語前言

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

什么是圖片CDN

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

為什么用圖片CDN

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

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

這次實(shí)現(xiàn)主要用的是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 });// 配置Cloudinarycloudinary.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ù)就行，通過postman調(diào)用本地接口，實(shí)現(xiàn)批量上傳

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

結(jié)語

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

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