NODE超详细讲解（三）

# 文件上传

使用的第三方 multer

1. 创建接收器

• 简单版

=> 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 })

2. 使用接收器

• 都是当做请求级中间件使用

• 单文件

=> 接收器.single('字段名')

• 单 key 多文件

=> 接收器.array('字段名')

• 多 key 多文件

=> 接收器.fields([ { name: '字段名' }, { name: '字段名' }, { name: '字段名' } ])

文件上传前端部分

1. 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,&