溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

node文件上傳功能簡(jiǎn)易實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-20 09:44:04 來(lái)源：腳本之家 閱讀：133 作者：楊成功 欄目：web開發(fā)

找了不少文件上傳的相關(guān)模塊，最后選擇了比較常用，并且是express推薦使用的 multer 來(lái)實(shí)現(xiàn)文件上傳，附上 GitHub 地址

1. 開始

開始第一步，自然就是安裝模塊，不多說(shuō)

npm install multer --save

這里簡(jiǎn)單說(shuō)一下，因?yàn)槲募蟼魇怯?post 方法提交數(shù)據(jù)，所以上傳的單文件或者多文件會(huì)作為一個(gè) body 體添加到請(qǐng)求對(duì)象中，我們可以通過(guò) req.file 或者 req.files 查看上傳后文件的相關(guān)信息。

以單文件上傳為例，req.file 返回一個(gè)對(duì)象：

{
   "fieldname":"avatar",  #前端上傳文件input的name
   "originalname":"Wx.php",  #本地文件名
   "encoding":"7bit",  #文件編碼類型
   "mimetype":"text/php",  #文件類型
   "destination":"uploads/",  #上傳根目錄
   "filename":"1497286037422Wx.php",  #上傳后文件名
   "path":"uploads/1497286037422Wx.php",  #文件路徑
   "size":18174  #文件大小
}

該對(duì)象的 key 值是固定的，velue 值根據(jù)配置生成，用于實(shí)現(xiàn)相關(guān)邏輯

2. 實(shí)現(xiàn)

實(shí)現(xiàn)分兩部分，前端和后端

前端

前端就是普通的寫法，form 表單提交

<form action="/test/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <input type="submit" name="提交">
</form>

切記，enctype="multipart/form-data" 這個(gè)屬性一定要加上，否則后臺(tái)接收不到文件。

后端

首先我們新建配置文件，upload.js

// upload.js

var multer = require('multer');  # 引入模塊

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相當(dāng)于創(chuàng)建一個(gè)磁盤存儲(chǔ)引擎，配置文件上傳路徑，文件名等，可控性更高。

destination  # 設(shè)置文件上傳路徑
filename    # 重命名文件

然后新建路由接收文件，file.js

// file.js 

var express = require('express');
var router = express.Router();

// 引入配置文件
var upload = require('../config/upload');

router.post('/upload', upload.single('avatar'), function(req, res, next) {
  res.send(req.file);
});

module.exports = router;

file.js 中 upload.single() 方法表示接受單文件，常用的有

upload.single(fname);  // 接收單文件
upload.array(fname[, maxCount])  //接收多文件，maxCount表示接收最大數(shù)量

fname 是前端 <input type="file" name="fname"> 的 name 值

基本的上傳文件方法就這些了，當(dāng)然還有很多的配置參數(shù)之類的設(shè)置，要參考 GitHub 說(shuō)明，地址在開頭，需要者自行查閱

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手