1.  文件上传所用到的模块介绍

multer：第三方模块，该模块是硬盘存储模块 主要用于处理客户端上传的文件；

2.单文件上传

2.1 前端页面

2.1.1 form表单用到的属性介绍：

action：向何处发送表单数据

method：设置请求数据的方式

enctype ：enctype 属性可设置或返回用于编码表单内容的 MIME 类型。如果表单没有 enctype 属性，那么当提交文本时的默认值是 “application/x-www-form-urlencoded”。 当 input type 是 “file” 时，值是 “multipart/form-data”。

2.1.2 input用到的的属性介绍:

accept:上传的文件类型限制，指定文件选择的类型

name属性的值要对应后端save函数的参数

2.1.3 前端页面代码

<form action="/upload/single" method="post" enctype="multipart/form-data">
        <!-- accept:上传的文件类型限制，指定文件选择的类型 name属性的值要对应后端save函数的参数 -->
        <input type="file" accept="image/*,.text" name="myFile">
        <br>
        <input type="text" name="des" id="" placeholder="文件描述">
        <br>
        <button>单文件上传</button>
    </form>

2.2 后端代码展示

前端的页面都是在服务器的public静态文件夹中，将文件上传，那么需要创建一个文件来存放上传的文件，在本次案例在public下创建了file文件夹来存放文件;

const express = require('express');
const bodyParser = require('body-parser');
// multer硬盘存储模块 用于处理客户端上传的文件
// 1.引入模块
const multer = require('multer');
let app = express();
app.use(express.static('./public'));
app.listen('5050', () => console.log('http://localhost:5050'))
app.use(bodyParser.urlencoded({ extended: false }));
// 2.配置硬盘存储的信息 包括存储的位置和存储的文件名
// 返回一个磁盘存储对象
var myStorage = multer.diskStorage({
    // 设置文件存储的位置 
    //req请求对象 file上传的文件信息 callback设置完成的回调函数(需要手动调用确认完成)
    destination(req, file, callback) {
        // 第一个参数是错误信息为null,第二个参数是客户上传文件的存储位置
        console.log(file);
        callback(null, './public/file')

    },
    // 设置文件存储的名字
    filename(req, file, callback) {
        console.log(file);
        console.log(file.originalname.toString());
        callback(null, file.originalname)

    }
})

// 3.创建一个硬盘存储函数，参数是一个对象,storage表示存储配置对象的信息
var save = multer({ storage: myStorage });


app.post("/upload/single", save.single("myFile"), function (req, res) {
    // save 函数会自动把文件擦偶才能到星盘 而非文件数据 依然在req.body里面
    console.log(req.body);
    res.send('文件已经上传')
})

3.多文件上传

与单文件上传不同的是：

1.前端页面的选择文件的input标签上添加了可以多文件选择的属性：multiple；

2.form 表单action的属性值应该与页面上其他的form表单属性值不同。（如果页面只有此一个表单，可忽略）

3.1 前端页面代码

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

3.后端服务器的接口应与前端form表单的action的属性值相同；

4.后端服务区在接口处使用调用的硬盘存储函数的使用的方法与单文件的single不同，多文件使用的是array方法；

3.2 服务器页面代码

const express = require('express');
const bodyParser = require('body-parser');
// multer硬盘存储模块 用于处理客户端上传的文件
// 1.引入模块
const multer = require('multer');
let app = express();
app.use(express.static('./public'));
app.listen('5050', () => console.log('http://localhost:5050'))
app.use(bodyParser.urlencoded({ extended: false }));
// 2.配置硬盘存储的信息 包括存储的位置和存储的文件名
// 返回一个磁盘存储对象
var myStorage = multer.diskStorage({
    // 设置文件存储的位置 
    //req请求对象 file上传的文件信息 callback设置完成的回调函数(需要手动调用确认完成)
    destination(req, file, callback) {
        // 第一个参数是错误信息为null,第二个参数是客户上传文件的存储位置
        console.log(file);
        callback(null, './public/file')

    },
    // 设置文件存储的名字
    filename(req, file, callback) {
        console.log(file);
        console.log(file.originalname.toString());
        callback(null, file.originalname)

    }
})

// 3.创建一个硬盘存储函数，参数是一个对象,storage表示存储配置对象的信息
var save = multer({ storage: myStorage });
// 建立接口，接受前端的数据
app.post("/upload/array", save.array("myFile"), function (req, res) {
    // save 函数会自动把文件擦偶才能到星盘 而非文件数据 依然在req.body里面
    console.log(req.body);
    res.send('文件已经上传')
})

至此，已经完成了单文件和多文件传输的基本用法；