NodeJS+formidable實現檔案上傳加自動重新命名

聞風聽雨發表於2020-12-04
NodeJSORM

前述

本人node初學者，此前使用原生node實現檔案上傳時遇到了一些困難，只做到了.txt 和.png兩中格式的檔案可以正常上傳，如果上傳其他格式檔案服務端儲存的檔案會無法正常開啟，原因是對form表單傳來的資料處理不徹底。後來查詢許多資料瞭解到了formidable這個第三方模組,可通過以下指令安裝：

npm i formidable

官方對它的描述：

A Node.js module for parsing form data, especially file uploads.
一個專門用來處理表單資料尤其是檔案上傳的Node.js模組。

實現過程

  1. 首先新建一個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> 元素時使用此值。

  1. 新建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");
  1. 使用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可以看到：
在這裡插入圖片描述
選擇一個檔案後點選提交：
在這裡插入圖片描述

然後即可在之前設定儲存目錄下看到已儲存且重新命名的檔案：
在這裡插入圖片描述

如有錯誤歡迎指正

相關文章