使用ajax实现前端文件上传到服务器（与form表单上传文件类似）
前情提要：上次中的表单的提交事件使用的是form表单的action属性，在这次使用ajax的表单提交中，我们要使用ajax向后端发送请求，将数据发送过去；
1.单文件上串
1.1 前端html
file类型的input表示选择上传的文件；
accept(接受,容纳)属性表示限制上传的文件类型；
name属性的属性值依旧需要与后端中硬盘存储函数中参数保持一致；
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(`
${item}
下载图片
`)
})
})
}
})
})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属性）
多文件上传
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(`
${item}
下载图片
`)
})
})
}
})
})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方法；