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("文件已上传")

})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐