目錄
- 前言
- 什么是圖片CDN
- 為什么用圖片CDN
- 實現過程
- 結語
前言
最近在做一個官網，里面需要很多圖片，比較占用資源，打包體積有點大。所以想換成圖片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調用
到此這篇關于node實現批量上傳本地圖片轉為圖片CDN的項目實踐的文章就介紹到這了,更多相關node 批量圖片CDN內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！