關于node使用multer進行文件的上傳與下載
更新時間：2023年04月19日 10:51:41 作者：阿晨學前端
這篇文章主要介紹了關于node使用multer進行文件的上傳與下載,Multer是一個Node.js中間件，用于處理表單數(shù)據中的multipart/form-data類型,需要的朋友可以參考下
首先了解下瀏覽器的自動下載：
使用Express靜態(tài)資源中間件的默認行為是在瀏覽器中展示靜態(tài)文件，而不是自動下載。
如果需要訪問靜態(tài)資源時自動下載，可以在HTTP響應中設置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ù)據中的multipart/form-data類型。主要用于上傳文件，將上傳的文件保存到指定的目錄中。
Multer還提供了多個方法，這些方法可以根據不同的需求設置文件上傳的行為。比如：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')
})
// 啟動服務器
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({
// 設置上傳文件存儲目錄
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('上傳成功')
})
// 啟動服務器
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');
}
}));
// 啟動服務器
app.listen(3000, () => {
console.log('Server running on http://localhost:3000')
})到此這篇關于關于node使用multer進行文件的上傳與下載的文章就介紹到這了,更多相關node使用multer文件上傳下載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Node.js如何實現(xiàn)注冊郵箱激活功能 (常見)
今天了解了node如何實現(xiàn)郵箱激活功能，這個功能非常常見，當我們注冊一個賬號時，肯定會有這步，下面看下如何實現(xiàn)這個功能2017-07-07
nodeJS（express4.x）+vue（vue-cli）構建前后端分離實例(帶跨域)
這篇文章主要介紹了nodeJS（express4.x）+vue（vue-cli）構建前后端分離實例(帶跨域) ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
學習Nodejs也是出于對這個新產物的好奇，而且有兩個重要項目也需要他的支持，所以要好好學學這個新語種。在nodejs中，模塊大概可以分為核心模塊和文件模塊。核心模塊是被編譯成二進制代碼，引用的時候只需require表示符即可2015-05-05
在ES6引入TypedArray之前，JavaScript語言沒有讀取或操作二進制數(shù)據流的機制，本文為大家詳細介紹nodeJS中二進制操作模塊buffer對象使用方法詳解2020-02-02
有沒有遇到過npm和cnpm一起用的時候出現(xiàn)奇奇怪怪的問題呢？ 有沒有遇到過cnpm在支付寶小程序上面安裝包無效？本文就詳解一下npm和cnpm混用的坑，感興趣的可以了解下2021-07-07
Node.js開發(fā)者過去通常將大多數(shù)可執(zhí)行命令發(fā)布為全局的軟件包,以使它們處于路徑中且可被立即地執(zhí)行,下面這篇文章主要給大家介紹了關于如何使用node執(zhí)行js文件的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了詳解Node.js串行化流程控制 ,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
基于Alpine Linux構建前端node-web鏡像步驟詳解
這篇文章主要為大家介紹了基于Alpine Linux構建前端node-web鏡像步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
NodeJS啟動的應用,內存使用是有上限的,下面這篇文章主要給大家介紹了關于node指定內存上限的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Node.js環(huán)境的安裝與運行方法,Node是基于Google Chrome V8引擎的JavaScript解釋器,需要的朋友可以參考下2016-02-02