文件上傳指的是將用戶本地的文件上傳到服務器中。
上傳文件需要處理兩個位置：
客戶端
1、multipart/form-data body-parser 無法解析， multer 模塊專門用來幫助我們解析多部件的請求體。
<body>
<h3>文件上傳（file upload）</h3>
<form action="/testUpload" method="post" enctype="multipart/form-data" id="form">
<pre>
Hi sir <input type="text" name="username"/>
upupup <input type="file" name="photo"/>
<input type="submit" value="提交" id ="btn" >
</pre>
</form>
// 利用AJAX 上傳文件
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
//FormData 這個對象可以用來對表單中的數據進行封裝
//使用FormData來對表單中的數據進行包裝
var fd = new FormData(document.getElementById("form"));
//創建一個xhr對象
var xhr = new XMLHttpRequest();
//設置請求的地址
xhr.open("post" , "/testUpload");
//發送請求
xhr.send(fd);
//接收響應
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
};
//取消默認行為
return false;
};
</script>
</body>
2. 服務器端
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const multer = require("multer");
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static("public"));
const storage = multer.diskStorage({
//destination 用來設置上傳文件的路徑 可以接收一個回調函數， 或者一個字符串
//如果傳遞一個回調函數的話，則需要確保路徑有效
destination: 'uploads/',
//filename 屬性可以用來指定文件上傳以后保存到服務器中的名字
filename: function (req, file, cb) {
//cb(null, file.fieldname + '-' + Date.now())
//獲取文件的擴展名
//Chrysanthemum.jpg
let fname = file.originalname;
let extName = "";
//判斷文件是否具有擴展名
if(fname.lastIndexOf(".") != -1){
extName = fname.slice(fname.lastIndexOf("."));
}
//上傳文件時，一般不會直接將用戶的文件名直接保存的服務器中
//一般會隨機生成一個文件名
cb(null, file.fieldname + '-' + Date.now()+extName);
}
})
const upload = multer(
{
storage: storage,
limits:{
//限制文件的大小為200kb
fileSize:1024*200
}
});
app.post("/testUpload" , (req , res)=>{
//獲取解析請求體的函數
let fu = upload.single('photo');
//手動調用函數來解析請求體
fu(req , res , (err)=>{
if(err){
//證明上傳出錯了，文件大小超標
res.send("文件太大了，請上傳200kb以下的文件??！");
}else{
//讀取請求參數
let username = req.body.username;
res.send("上傳成功~~~");
}
});
});
app.listen(3333,()=>{
console.log("success");
});
文件夾示例
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
