# 文件上传
使用的第三方 multer
创建接收器
简单版
=> const upload = multer({ dest: '存储路径' })
=> 上传的文件随机名称并且没有后缀
复杂版
=> const storageInfo = multer.diskStorage({
destnation (req, file, cb) { cb(null, '存储路径') },
filename (req, file, cb) { cb(null, '文件名称') }
})
=> const upload = multer({ storage: storageInfo })
使用接收器
都是当做请求级中间件使用
单文件
=> 接收器.single('字段名')
单 key 多文件
=> 接收器.array('字段名')
多 key 多文件
=> 接收器.fields([ { name: '字段名' }, { name: '字段名' }, { name: '字段名' } ])
文件上传前端部分
form 标签的要求
=> action 属性, 书写上传的目标地址(服务器的接受地址)
=> method 属性, 值必须是 POST
=> enctype 属性, 值需要是 multipart/form-data
input 标签的要求
=> 需要 type 是 file, 可以选择文件
=> 需要一个 name 属性, 表示当前这个文件的字段
=> 注意: 如果 input 没有 name 属性, 那么当前表单提交的时候, 是不会提交该表单内容的
www/views/index.html
<link rel="stylesheet" href="/css/index.css">
<form action="http://localhost:8080/users/me" method="post" enctype="multipart/form-data">
<input type="file" name="me" id="">
<button>提交</button>
</form>
www/views/01.index.html
<form>
<input type="file" multiple name="me" id="">
<button>提交</button>
</form>
<script>
let form = document.querySelector('form');
form.onsubmit = function(e){
e.preventDefault();
let fm = new FormData(form);
// for(let value of fm){
// console.log(value);
// }
let xhr = new XMLHttpRequest();
xhr.open('post','http://localhost:8080/users/me',true);
xhr.onload = function(){
}
xhr.send(fm);
}
</script>
文件 上传 后端部分
router/users.js
//1. 导入用户处理函数
const { fnLogin,fnRegister } = require('../controller/users');
//接收文件,需要一个第三方的插件multer
const multer = require('multer');
const UserRouter = require('express').Router();
//2. 添加路由
UserRouter.post('/login',fnLogin);
UserRouter.post('/register',fnRegister);
//创建一个接收器
const upload = multer({dest: './public/'});
//接收器当作一个中间件使用
UserRouter.post('/me',upload.single('me'),(req,res) => {
console.log(req.file);
})
//3. 导出路由
module.exports = UserRouter;
文件上传-后端部分-完整版-单文件上传
router/users.js
//1. 导入用户处理函数
const { fnLogin,fnRegister } = require('../controller/users');
//接收文件,需要一个第三方的插件multer
const multer = require('multer');
const path = require('path');
const UserRouter = require('express').Router();
//2. 添加路由
UserRouter.post('/login',fnLogin);
UserRouter.post('/register',fnRegister);
//创建一个接收器
//创建一个详细的存储信息
const storageInfo = multer.diskStorage({
destination(req,file,cb){
cb(null,'./public/');
},
filename(req,file,cb){
// console.log(file);
let ext = path.extname(file.originalname)
cb(null,`${file.fieldname}_${Date.now()}${ext}`);
}
})
const upload = multer({storage: storageInfo});
//接收器当作一个中间件使用
UserRouter.post('/me',upload.single('me'),(req,res) => {
console.log(req.file);
})
//3. 导出路由
module.exports = UserRouter;
文件上传-后端部分-完整版-单key多文件上传
router/users.js
//1. 导入用户处理函数
const { fnLogin,fnRegister } = require('../controller/users');
//接收文件,需要一个第三方的插件multer
const multer = require('multer');
const path = require('path');
const UserRouter = require('express').Router();
//2. 添加路由
UserRouter.post('/login',fnLogin);
UserRouter.post('/register',fnRegister);
//创建一个接收器
//创建一个详细的存储信息
const storageInfo = multer.diskStorage({
destination(req,file,cb){
cb(null,&