html模塊

單文件上傳

使用form表單上傳 必須是post請求
文件上傳需要設置表單類型 enctype=“multipart/form-data”
```html

<form action="/upload/single" method="post" enctype="multipart/form-data"><!-- accept 屬性是指定文件選擇類型 name屬性的值 要對應后端的save函數參數 --><input type="file" accept="image/*,.txt" name="myFile"><br><input type="text" name="myFile" placeholder="文件描述"><br><button>單文件上傳</button> </form>```

多文件上傳

<form action="/upload/array" method="post" enctype="multipart/form-data"><input type="file" accept="image/*,.txt" name="myFile" multiple><br><input type="text" name="myFile" placeholder="文件描述" ><br><button>單文件上傳</button> </form>

js模塊

1. 導入模塊

var express =require("express") var app = express() var bodyParser=require("body-parser") app.use(express.static("public")) app.use(bodyParser.urlencoded({extended:false})) // multer 是一個硬盤存儲模塊 用于處理保存客戶端上傳的文件 var multer = require("multer")// multer 是一個硬盤存儲模塊 用于處理保存客戶端上傳的文件 var multer = require("multer")

設置服務器端口

app.listen(5000,function(){console.log("服務器已啟動"); })

2. 配置硬盤存儲信息 包括存儲的位置 和存儲文件名

// 返回一個硬盤存儲對象 var myStorage = multer.diskStorage({// 設置文件存儲的目標位置destination(req,file,callback){// req 請求對象// file 上傳的文件信息 不是文件本身console.log(file);// 設置完成的回調函數 需要手動調用確認完成callback(null,"./public/file") // null 表示錯誤信息為空 "./public/file" 存儲位置},// 設置 文件存儲的名稱filename(req,file,callback){callback(null,file.originalname); //originalname: 上傳的文件名} })

3. 創建一個硬盤存儲函數 參數是一個對象 Storage 表示存儲配置信息對象

var save = multer({storage:myStorage});

4.在請求接口處 存儲上傳的文件 文件上傳必須是post請求

單文件上傳

app.post("/upload/single",save.single("myFile"),function(req,res){// save 函數會自動把文件保存到硬盤 而非文件數據 依然在req.body里面console.log(req.body);res.send("文件已上傳") })

多文件上傳

app.post("/upload/array",save.array("myFile"),function(req,res){// save函數會自動把文件保存到硬盤 而非文件數據 依然在req.body里面console.log(req.body);res.send("文件已上傳")})

總結

以上是生活随笔為你收集整理的node.js 实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。