node.js 实现文件上传
文件上传 node.js form表单
·
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("文件已上传")
})
更多推荐
已为社区贡献1条内容
所有评论(0)