Day 14-功能規格設計-Api開發設計-4

2023 iThome 鐵人賽

DAY 14

SideProject30

Electron Angular軟體架構與簡易功能實作學習路程實記系列第 14 篇

15th鐵人賽

Terry

2023-09-29 22:24:43

168 瀏覽

分享至

express-fileupload安裝

$ npm install express-fileupload
$ npm install @types/express-fileupload

單檔下載儲存

PictureController.use(fileUpload());
PictureController.post('/PictureUpload', function(req, res) {
  let uploadPath;

  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }
  let uploadedFile: fileUpload.UploadedFile;
  if (req.files.sampleFile instanceof Array) {
    uploadedFile = req.files.sampleFile[0];
  }
  else {
    uploadedFile = req.files.sampleFile;
    uploadPath = __dirname + '/' + uploadedFile.name;
    uploadedFile.mv(uploadPath, function(err) {
      res.send('File uploaded!');
    });
  }
});

export default PictureController;

前端測試頁面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form ref='uploadForm'
        id='uploadForm'
        action='http://localhost:3000/PictureUpload'
        method='post'
        encType="multipart/form-data">
    <input type="file" name="sampleFile" />
    <input type='submit' value='Upload!' />
  </form>`
</body>
</html>