使用ajax实现前端文件上传到服务器（与form表单上传文件类似）

前情提要：上次中的表单的提交事件使用的是form表单的action属性，在这次使用ajax的表单提交中，我们要使用ajax向后端发送请求，将数据发送过去；

1.单文件上串

1.1 前端html

file类型的input表示选择上传的文件；

accept(接受,容纳)属性表示限制上传的文件类型；

name属性的属性值依旧需要与后端中硬盘存储函数中参数保持一致；

<form id="singleUpload">
        <input type="file" accept="image/*,.txt" name="myFile" id="singleInput"> <br>
        <input type="text" name="des" placeholder="文件描述" id="singleInfo"><br>
        <button>单文件上传</button>
    </form>

1.2 前端js代码（前端程序员*）

a标签写的地址如果是图片等浏览器能够识别的文件,会默认在新窗口打开；

a标签如果再加上download属性，那么会将浏览器能识别文件进行下载；

 $("#singleUpload").submit(function () {
            // 阻止表单默认的提交事件
            event.preventDefault();
            // 文件上传的要求数据格式form-data 在js中新建一个FormData的类对象 
            // 把上传的文件放入FormData对象中即可
            var formData = new FormData();
            formData.append("myFile", $("#singleInput")[0].files[0]);
            formData.append("info", $("#singleInfo").val());

            $.ajax({
                type: "post",  //请求类型
                url: "/upload/single", //请求后端的地址
                data: formData,  // 向后端发送的数据
                processData: false,//阻止jquery对formData数据进行加工处理
                contentType: false,//阻止jquery修改formData数据的类型
                // 请求成功后执行的函数
                success: res => {
                    // 文件上传成功之后 再次发起ajax请求 请求已经上传的文件
                    // 将后端发过来的图片全部渲染
                    $.get("/allFile", data => {
                        console.log(data);
                        data.array.forEach(item => {
                            $("ul").append(`
                            <li>
                        <h4>${item}</h4>
                        <img src="./file/${item}" alt="">
                        <a href="./file/${item}" download>下载图片</a>
                       </li>
                            `)
                        })
                    })
                }
            })
        })

1.3 服务器代码

与上篇文章中的后端代码差不多；

var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: false }));
app.listen(5000,()=>console.log('http://localhost:5000'));

// npm i multer

// 1.multer 是一个硬盘存储模块 用于处理保存客户端上传的文件
var multer = require("multer");

// 2.配置硬盘存储的信息 包括储存的位置 和储存文件名

// 返回一个硬盘存储对象
var myStorage = multer.diskStorage({
    // 设置文件存储的目标位置
    destination(req, file, callback) {
        // req 请求对象
        // file 上传的文件信息
        // 设置完成完成的回调函数 需要手动调用确认完成
        callback(null, "./public/file"); //null表示错误信息为空  后面是存储的位置
    },

    // 设置文件存储的名字
    filename(req, file, callback) {
        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("文件已上传")
})

// 使用fs内置模块，读取上传的所有的图片，然后将文件发送过去
var fs = require("fs");
app.get("/allFile", function (req, res) {
    fs.readdir("./public/file", function (err, array) {
        if (err) {
            res.json({
                code: 0,
                array: []
            })
        } else {
            res.json({
                code: 1,
                array
            })

        }
    })

})

2.多文件上传

2.1 前端html代码 （与单文件上传 input加上了multiple属性）

<h1>多文件上传</h1>
    <form id="arrayUpload">
        <input type="file" accept="image/*,.txt" name="myFile" multiple id="arrayInput"> <br>
        <input type="text" name="des" placeholder="文件描述" id="arrayInfo"><br>
        <button>多文件上传</button>
    </form>

2.2 前端js代码（与单文件上传相比只是选择器，请求地址发生了改变）

 $("#arrayUpload").submit(function () {
            event.preventDefault();
            var files = $("#arrayInput")[0].files;
            // 文件上传的要求数据格式form-data 在js中新建一个FormData类的对象 
            // 把上传的文件放入FormData 对象中即可
            var formData = new FormData();
            for (const file of files) {
                formData.append("myFile", file);
            }
            formData.append("info", $("#singleInfo").val());

            $.ajax({
                type: "post",
                url: "/upload/array",
                data: formData,
                processData: false,//阻止jquery对formData数据进行加工处理
                contentType: false,//阻止jquery修改formData数据的类型
                success: res => {
                    // console.log(res);
                    // 文件上传成功之后 再次发起ajax请求 请求已经上传的文件
                    $.get("/allFile", data => {
                        console.log(data);
                        data.array.forEach(item => {
                            $("ul").append(`
                            <li>
                        <h4>${item}</h4>
                        <img src="./file/${item}" alt="">
                        <a href="./file/${item}" download>下载图片</a>
                       </li>
                            `)
                        })
                    })
                }

            })
        })

2.3 服务器代码

2.3.1 与单文件是上传的不同是硬盘存储函数的方法是array，不是single

app.post("/upload/array", save.array("myFile"), function (req, res) {
    res.send("文件已上传")
})

3form（action）上传文件和ajax上传文件的异同点

1.使用form的action可以直接写请求数据的地址，直接再服务器写接口即可；使用ajax虽然麻烦点，但是逻辑清晰；

2.服务器都用到了第三方模块multer；

3.使用ajax上传文件需要在前端的js代码中使用FormData构造函数和其append方法；