Dalam tutorial ini, kami akan menunjukkan kepada anda cara membina pelayan dengan Express.js yang mengendalikan muat naik fail dan melaksanakan pemprosesan imej dinamik seperti saiz semula, penukaran format dan pelarasan kualiti menggunakan Sharp.
Sebelum kita mula, pastikan anda telah memasang Node.js dan npm. Kami akan menggunakan perpustakaan berikut dalam tutorial ini:
Mulakan dengan mencipta direktori baharu untuk projek anda:
mkdir image-upload-server cd image-upload-server npm init -y
Ini akan mencipta folder projek baharu dan memulakan fail package.json.
Anda boleh memasang semua kebergantungan dengan menjalankan:
npm install express multer sharp cors
Kami memerlukan dua direktori:
Buat direktori ini dengan menjalankan:
mkdir original-image transform-image
Sekarang, mari sediakan pelayan asas menggunakan Express.js. Buat fail bernama index.js dalam akar projek anda dan tambahkan kod berikut untuk menyediakan pelayan:
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');
const app = express();
// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
Persediaan asas ini termasuk:
Kami akan menggunakan Multer untuk mengendalikan muat naik fail. Multer membenarkan kami menyimpan fail yang dimuat naik dalam direktori tertentu.
Tambah kod berikut untuk mengkonfigurasi Multer:
// Configure multer for file storage
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'original-image'); // Ensure the 'original-image' directory exists
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
Persediaan ini memastikan bahawa:
Seterusnya, buat titik akhir POST untuk muat naik fail. Pengguna akan menghantar fail ke pelayan dan pelayan akan menyimpan fail dalam direktori imej asal.
Tambah kod berikut untuk mengendalikan muat naik fail:
// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
const file = req.file;
if (!file) {
return res.status(400).send({ message: 'Please select a file.' });
}
const url = `http://localhost:3000/${file.filename}`;
// Store file path with original filename as the key
db.set(file.filename, file.path);
res.json({
message: 'File uploaded successfully.',
url: url
});
});
Titik akhir ini melakukan perkara berikut:
Sekarang, mari buat titik akhir DAPATKAN untuk menyampaikan fail yang dimuat naik. Jika sebarang parameter pertanyaan disediakan (contohnya, mengubah saiz, penukaran format), pelayan akan memproses imej tersebut dengan sewajarnya.
Tambah kod berikut untuk menyampaikan fail yang dimuat naik:
mkdir image-upload-server cd image-upload-server npm init -y
Titik akhir ini:
Pustaka Sharp akan membolehkan kami melakukan pelbagai transformasi pada imej, seperti saiz semula, penukaran format dan pelarasan kualiti.
Tambahkan fungsi processImage yang mengendalikan transformasi ini:
npm install express multer sharp cors
Fungsi ini:
Akhir sekali, mulakan pelayan dengan menambah kod berikut:
mkdir original-image transform-image
Ini akan memulakan pelayan pada port 3000.
Untuk menguji kefungsian muat naik fail menggunakan Posmen, ikut langkah berikut:
Lancarkan Posmen pada komputer anda. Jika anda belum memasang Posmen, anda boleh memuat turunnya di sini.
Contoh Respons:
mkdir image-upload-server cd image-upload-server npm init -y
Sekarang, mari kita uji mendapatkan semula imej dengan transformasi menggunakan Pelayar.
Untuk mendapatkan semula imej, cuma buka penyemak imbas anda dan navigasi ke URL yang anda terima selepas memuat naik fail. Contohnya, jika URL respons ialah:
npm install express multer sharp cors
Hanya taip URL ini dalam bar alamat penyemak imbas anda dan tekan Enter. Anda sepatutnya melihat imej asal dipaparkan.
Sekarang, mari kita uji transformasi imej dinamik dengan menambahkan parameter pertanyaan untuk mengubah saiz, penukaran format dan pelarasan kualiti.
Dalam penyemak imbas anda, tambahkan parameter pertanyaan pada URL imej untuk menguji transformasi. Berikut ialah beberapa contoh:
mkdir original-image transform-image
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');
const app = express();
// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// Configure multer for file storage
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'original-image'); // Ensure the 'original-image' directory exists
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
const file = req.file;
if (!file) {
return res.status(400).send({ message: 'Please select a file.' });
}
const url = `http://localhost:3000/${file.filename}`;
// Store file path with original filename as the key
db.set(file.filename, file.path);
res.json({
message: 'File uploaded successfully.',
url: url
});
});
Pelayar akan memaparkan imej yang diproses dan anda boleh mengesahkan sama ada transformasi telah digunakan dengan betul.
Pelayan muat naik dan pemprosesan imej ini menyediakan penyelesaian yang mantap untuk mengendalikan muat naik imej, transformasi dan pengambilan semula. Menggunakan Multer untuk pengendalian fail dan Sharp untuk pemprosesan imej, ia menyokong saiz semula, penukaran format dan pelarasan kualiti melalui parameter pertanyaan. Sistem ini dengan cekap menyimpan imej yang diproses untuk mengoptimumkan prestasi, memastikan penghantaran imej yang cepat dan responsif. Pendekatan ini memudahkan pengurusan imej untuk aplikasi yang memerlukan transformasi imej dinamik, menjadikannya alat serba boleh untuk pembangun.
Atas ialah kandungan terperinci Membina Apl web Ekspres untuk Muat Naik Fail dan Pemprosesan Imej Dinamik dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kelebihan sistem kawalan plc
padam folder dalam linux
Pengenalan kepada atribut tag artikel
Bagaimana cara menaip tulisan pada bulatan syiling?
Apakah maksud syiling MLM? Berapa lama masa yang biasanya diambil untuk runtuh?
Penggunaan biasa Array.slice
Sepuluh pertukaran mata wang digital teratas
Senarai kunci pengaktifan Windows 10
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
