快捷導(dǎo)航

node實現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項目實踐

更新時間：2023年07月14日 11:39:46 作者：窮小白

本文主要介紹了node實現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

什么是圖片CDN

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

為什么用圖片CDN

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

實現(xiàn)過程

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

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

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