關(guān)于node使用multer進行文件的上傳與下載

更新時間：2023年04月19日 10:51:41 作者：阿晨學前端

這篇文章主要介紹了關(guān)于node使用multer進行文件的上傳與下載,Multer是一個Node.js中間件，用于處理表單數(shù)據(jù)中的multipart/form-data類型,需要的朋友可以參考下

首先了解下瀏覽器的自動下載：

使用Express靜態(tài)資源中間件的默認行為是在瀏覽器中展示靜態(tài)文件，而不是自動下載。

如果需要訪問靜態(tài)資源時自動下載，可以在HTTP響應(yīng)中設(shè)置Content-Disposition頭。Content-Disposition頭指示瀏覽器以何種方式處理要下載的文件。

常見的Content-Disposition值有"inline"和"attachment"。當Content-Disposition的值為"attachment"時，瀏覽器會自動下載文件，示例代碼如下：

app.use('/uploads', express.static(__dirname + '/uploads', {
  setHeaders: (res, path) => {
    res.setHeader('Content-Disposition', 'attachment');
  }
}));

再來了解下multer：

Multer是一個Node.js中間件，用于處理表單數(shù)據(jù)中的multipart/form-data類型。主要用于上傳文件，將上傳的文件保存到指定的目錄中。

Multer還提供了多個方法，這些方法可以根據(jù)不同的需求設(shè)置文件上傳的行為。比如：single()方法用于上傳單個文件，none()方法表示不接受任何文件，fields()方法用于上傳多個字段的文件，limits屬性用于限制上傳文件的大小等

接下來開始準備：

//html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>圖片上傳</title>
</head>
<body>
  <input type="file" id="fileInput">
  <br><br>
  <button onclick="upload()">上傳</button>
  
  <script>
    function upload() {
      const formData = new FormData()
      formData.append('image', document.getElementById('fileInput').files[0])
      
      fetch('http://127.0.0.1:3000/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(result => {
        console.log(result)
      })
    }
  </script>
</body>
</html>

//app.js
const express = require('express')
const app = express()
 
// 創(chuàng)建上傳路由
app.post('/upload', (req, res) => {
  res.send('hello world')
})
 
// 啟動服務(wù)器
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

安裝Multer，npm i Multer，根目錄新建一個uploads文件夾然后對app.js進行配置：就實現(xiàn)了文件上傳

const express = require('express')
const multer = require('multer')
const path = require('path')
 
const app = express()
 
// diskStorage創(chuàng)建上傳存儲器 
const storage = multer.diskStorage({
  // 設(shè)置上傳文件存儲目錄
  destination: function (req, file, cb) {
    cb(null, './uploads/') 
  },
  //保存在 uploads 中的文件名
  filename: function (req, file, cb) {
    const extname = path.extname(file.originalname) // 獲取文件后綴名
    const filename = Date.now() + '-' + extname     // 時間戳+后綴名 生成唯一文件名
    cb(null, filename)
  }
})
 
//創(chuàng)建一個名為upload的文件上傳示例
const upload = multer({ storage: storage })
 
// 創(chuàng)建上傳路由
// upload.single('image') 處理單個文件上傳
app.post('/upload', upload.single('image'), (req, res) => {
  const file = req.file
  if (!file) {
    return res.status(400).send('請選擇要上傳的圖片')
  }
  res.send('上傳成功')
})
 
// 啟動服務(wù)器
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

然后實現(xiàn)文件下載，也是對app.js進行配置：url+uploads+上傳的文件就可以實現(xiàn)下載

const express = require('express')
const multer = require('multer')
const path = require('path')
 
const app = express()
 
XXXXXXXXXXXXXXX 跟上面一樣的
 
app.use('/uploads', express.static(__dirname + '/uploads', {
  setHeaders: (res, path) => {
    // 當Content-Disposition的值為"attachment"時，瀏覽器會自動下載文件
    res.setHeader('Content-Disposition', 'attachment');
  }
}));
 
// 啟動服務(wù)器
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})

到此這篇關(guān)于關(guān)于node使用multer進行文件的上傳與下載的文章就介紹到這了,更多相關(guān)node使用multer文件上傳下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: