Node.js - 上傳文件：初學者指南

你好，未來的編程超新星！歡迎來到我們令人興奮的Node.js文件上傳之旅。作為你友好的鄰居計算機老師，我非常高興能夠引導你進行這次冒險。如果你以前從未寫過一行代碼，也不要擔心——我們會從頭開始，逐步建立。在這個教學的結尾，你將會像專家一樣上傳文件！

Node.js文件上傳介紹

在我們深入細節之前，讓我們先討論一下為什麼文件上傳這麼重要。想像一下，你正在創建一個社交媒體應用程序，用戶可以分享照片。或者也許你正在為一家公司建立文件管理系統。在這兩種情況下，你都需要一種方式讓用戶將文件發送到你的服務器。這就是文件上傳的用處！

我們可靠的JavaScript運行時Node.js提供了多種處理文件上傳的方法。今天，我們將專注於兩個流行的庫：Formidable和Multer。將這些看作是你的文件上傳超級英雄，每個都有自己獨特的能力！

Formidable：你的第一位文件上傳助手

Formidable是什麼？

Formidable就像那個總是準備幫你搬家的可靠朋友。它是一個Node.js模塊，可以讓解析表單數據（尤其是文件上傳）變得非常容易。讓我們看看如何使用它！

設置Formidable

首先，我們需要安裝Formidable。打開你的終端並輸入：

npm install formidable

這個命令就像去超級英雄商店並選擇你的Formidable服裝。現在，你已經準備好開始上傳了！

使用Formidable的基本文件上傳

讓我們創建一個能夠處理文件上傳的簡單服務器。這裡是代碼：

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('文件已上傳並移動！');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

讓我們分解這段代碼：

1. 我們使用http.createServer()創建一個服務器。
2. 如果URL是'/fileupload'，我們使用Formidable來解析來的表單。
3. 我們將上傳的文件從臨時位置移動到永久位置。
4. 如果URL是其他任何東西，我們顯示一個簡單的上傳表單。

處理多個文件上傳

如果你想要一次性上傳多個文件呢？沒問題！這裡是如何修改代碼：

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('文件已上傳並移動！');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

這裡的主要改變是：

1. 我們設置form.multiples = true以允許多個文件上傳。
2. 我們檢查files.filetoupload是否為數組（多個文件）或對象（單個文件）。
3. 如果需要，我們使用forEach來處理多個文件。

Multer：新來者

Multer介紹

現在，讓我們來見見我們的第二個文件上傳超級英雄：Multer。Multer就像Formidable的更酷、更年輕的兄弟姐妹。它專門設計用於處理multipart/form-data，這對文件上傳來說非常完美。

設置Multer

要開始使用Multer，使用npm進行安裝：

npm install multer

使用Multer的基本文件上傳

這裡是如何使用Multer的簡單示例：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('請上傳一個文件');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('服務器已在端口3000啟動'));

讓我們分解這段代碼：

1. 我們設置一個存儲引擎，告訴Multer將文件存儲在哪裡以及如何命名。
2. 我們使用我們的存儲設置創建一個上傳實例。
3. 我們定義一個路由用於上傳表單和另一個路由用於處理文件上傳。
4. 在上傳路由中，我們使用upload.single('filetoupload')來處理單個文件上傳。

使用Multer處理多個文件上傳

Multer讓處理多個文件上傳變得非常容易。這樣做：

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('請選擇文件');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

這裡的主要改變是使用upload.array('filetoupload', 12)而不是upload.single()。'12'指定了最多12個文件。

比較Formidable和Multer

現在我們已經看到了Formidable和Multer的實際應用，讓我們比較一下它們：

特性	Formidable	Multer
使用難度	簡單直觀	需要更多的設置，但提供更多的控制
網絡集成	與任何Node.js服務器配合使用	設計用於與Express配合使用
文件處理	可以同時處理文件和字段	專門為文件上傳設計
自定義	較不靈活	高度可自定義
多個文件上傳	需要額外的代碼	內置支持

結論

恭喜你！你剛剛通過學習如何處理Node.js中的文件上傳來提升了自己的Node.js技能。無論你選擇Formidable還是Multer，你現在都已經有能力為你的Node.js應用程序添加文件上傳功能。

記住，熟能生巧。嘗試建立一個使用文件上傳的小項目——也許是一個簡單的圖片分享應用程序或文件存儲系統。你編寫的代碼越多，你就會越熟悉這些概念。

快樂編程，願你的上傳總是成功！

Credits: Image by storyset