NodeJS+formidable實現檔案上傳加自動重新命名
阿新 • • 發佈:2020-12-04
前述
本人node初學者,此前使用原生node實現檔案上傳時遇到了一些困難,只做到了.txt
和.png
兩中格式的檔案可以正常上傳,如果上傳其他格式檔案服務端儲存的檔案會無法正常開啟,原因是對form表單傳來的資料處理不徹底。後來查詢許多資料瞭解到了formidable
這個第三方模組,可通過以下指令安裝:
npm i formidable
官方對它的描述:
A Node.js module for parsing form data, especially file uploads.
一個專門用來處理表單資料尤其是檔案上傳的Node.js模組。
實現過程
- 首先新建一個html檔案作為前端,由於這裡只講功能所有沒有新增任何樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上傳檔案</title> </head> <body> <form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="up_file" id="upload"> <input type="submit" id="submit" name="submit"> </form> </body> </html>
這裡需要把form的enctype
設定為multipart/form-data
。
MND對此的描述:
multipart/form-data:當表單包含 type=file 的
<input>
元素時使用此值。
- 新建main.js,用node的http模組開啟http服務。
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");
- 使用
formidable
處理表單資料,並對生成的新檔案重新命名。
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('<meta charset="UTF-8" />');
res.end("<h1>上傳結束</h1>");
})
}
function generateFilename(oldFilename){
//將老的檔名拼上時間戳,這樣既不會命名衝突又可以看出檔案的上傳事件
let d = new Date();
let names = oldFilename.split(".");
return `${names[0]}_${""+d.getFullYear() + (d.getMonth()+1) + d.getDate() +'_'+ d.getHours() + d.getMinutes() + d.getSeconds()}.${names[1]}`;
}
執行效果
使用node main.js
指令將程式執行起來,然後在瀏覽器輸入http://127.0.0.1:8080
可以看到:
選擇一個檔案後點擊提交:
然後即可在之前設定儲存目錄下看到已儲存且重新命名的檔案:
如有錯誤歡迎指正