// 配置路由表 设定的 请求路径是 /api/user/upload 设定一个 函数文件设定 upload.js 上传文件程序的执行
设定一个 二级表文件 user.js
二级表文件中 导入 upload.js
二级表.post() 中 添加 /upload 路径对应执行的程序
最终 输入请求地址是 /api/user/upload
会 将 upload.js 中设定的函数程序 导入 app.js 中触发执行
// 前端部分
form标签中设定input标签
需要通过 new FormDate() 获取 form标签中 所有的标签存储的数据数值
form标签 有默认事件执行效果
必须要阻止默认事件执行
发送的ajax请求
虽然是post请求方式
虽然要传参图片数据
// 但是 不要设定 请求头
xhr.send( form标签参数数据实例化对象 )
程序执行会有报错 但是不影响文件上传操作
// 后端部分
npm i multer
下载 multer 项目依赖包
const multer = require('multer');
导入依赖包
const storageInfo = multer.diskStorage({
有两个固定的键名键值
destination:( 参数1, 参数2, 参数3 ){
上传文件 存储的文件夹路径设定
参数1 请求相关数据
参数2 上传文件相关数据集
参数3 回调函数
参数3( null , '上传文件文件夹相对路径' );
目前 别的不用管 只需要通过参数3回调函数 设定 上传文件 存储的文件夹相对路径
相对路径是从最终导入的文件开始设定的
},
filename:( 参数1, 参数2, 参数3 )=>{
上传文件 文件名称 扩展名 设定
参数1 请求相关数据
参数2 上传文件相关数据
参数3 回调函数
参数2中存储 上传文件相关数据
{
fieldname: 'file',
前端input>file标签 name属性的属性值
originalname: '2023-03-20_160000.png',
文件原始名称
可以通过 文件的原始名 获取 文件的扩展名
encoding: '7bit',
mimetype: 'image/png'
}
通过 参数2 获取 文件原始的扩展名
通过 js程序 设定一个随机文件夹
目前的方法是 时间戳 拼接 6位随机数
参数3( null , 设定的文件名--随机文件夹 拼接 原始扩展名 );
}
});
配置 上传文件接收器
本质是 配置 上传文件的文件夹 配置 上传文件的文件名称
const upload = multer({ storage: storageInfo });
将 配置好的上传文件接收器
也就是 上传文件文件夹 和 上传文件名称 配置给 上传文件程序
upload.single( '前端input标签name属性属性值' );
使用 单位件 上传程序 完成单位件上传操作