NodeJS+formidable實現檔案上傳加自動重新命名
阿新 • • 發佈：2020-12-04
## 前述
本人node初學者，此前使用原生node實現檔案上傳時遇到了一些困難，只做到了`.txt` 和`.png`兩中格式的檔案可以正常上傳，如果上傳其他格式檔案服務端儲存的檔案會無法正常開啟，原因是對form表單傳來的資料處理不徹底。後來查詢許多資料瞭解到了[`formidable`](https://www.npmjs.com/package/formidable)這個第三方模組,可通過以下指令安裝：
```
npm i formidable
```
官方對它的描述：
> A Node.js module for parsing form data, especially file uploads.
一個專門用來處理表單資料尤其是檔案上傳的Node.js模組。
## 實現過程
1. 首先新建一個html檔案作為前端，由於這裡只講功能所有沒有新增任何樣式。
```html
```
這裡需要把form的`enctype`設定為`multipart/form-data`。
[MND](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form)對此的描述：
>multipart/form-data：當表單包含 type=file 的 `` 元素時使用此值。
2. 新建main.js，用node的http模組開啟http服務。
```js
const http = require("http");
const fs = require("fs");
const formidable = require("formidable");
let server = http.createServer((req,res)=>{
if(req.url = "/upload"){
switch(req.method){
case "GET":
//使用流來載入upload.html
fs.createReadStream("./upload.html").pipe(res);
break;
case "POST":
dealUpload(req,res);
break;
default:
console.log("other method...");
break;
}
}else{
res.writeHead(302,{"Location": "upload"});
res.end();
}
})
//監聽8080埠
server.listen(8080);
console.log("listening on 8080, http://127.0.0.1:8080");
```
3. 使用`formidable`處理表單資料，並對生成的新檔案重新命名。
```js
function dealUpload(req,res){
var form = formidable.IncomingForm();
//保持原有副檔名
form.keepExtensions = true;
//設定上傳目錄
form.uploadDir = __dirname + "/files/";
form.parse(req,function(err,fields,files){
if(err) throw err;
console.log(fields);
let oldFilename = files.up_file.name;
//重新命名上傳的檔案
fs.rename(files.up_file.path, form.uploadDir + generateFilename(oldFilename),err=>{
if(err) {
console.log("重新命名失敗");
console.log(err);
}else{
console.log("重新命名成功!");
}
})
res.writeHead(200,{"Content-type":"text/html;charset='utf-8'"});
res.write('');
res.end("