实现文件拖拽上传到服务器功能
一、步骤
1、客户端提交文件的请求方式必须是POST
2、发请求必须携带消息头：Content-Type:multipart/form-data
3、Content-Type:application/x-www-form-urlencode 客户端将本地文件在请求body部分以数据流方式传给服务器端
4、服务器端接收客户端传来的数据流，边接收边保存到服务器磁盘
二、获取拖拽文件信息
在全局安装
npm install multer
在客户端中创建新文件file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传文件</title>
<style>
#div {
width: 600px;
height: 250px;
border: 2px solid black;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 250px;
background-color: burlywood;
}
</style>
</head>
<body>
<div id="div">
将文件拖入此处上传
</div>
</body>
<script src="./axios.min.js"></script>
<script>
let div = document.getElementById('div');
div.addEventListener('dragover', (e) => {
e.preventDefault();
});
div.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
let files = e.dataTransfer.files;
console.log(files) //files可以是多个文件filelist 将files中的第一个文件上传到服务器
let formData = new FormData();
//uploadFile为参数名，在服务器端需要通过这个名字获取文件数据
for (let i = 0; i < files.length; i++) {
formData.append('uploadFile', files[i])
axios.post('http://localhost:3000/upload', formData)
}//通过循环遍历将多个文件上传到服务器
});
</script>
</html>
三、创建服务器文件index.js
// 加载express模块
const express = require('express')
// 创建web服务实例
const server = express()
//配置CORS，指定放行的域名，防止出现跨域问题
const cors = require('cors')
server.use(cors({
origin:['http://127.0.0.1:5500']
}))
//配置multer中间件
const multer = require('multer')
obj = multer.diskStorage({
destination : function(req, file, cb){ //指定目录
cb(null, 'upload')//我创建的与index.js同级的文件夹，里面放上传的文件
},
filename : function (req, file, cb){ // 指定文件名
// console.log(uuid.v1())
// console.log(uuid.v4())
let name = file.originalname
// name: abcd.jpg xxxdfdd.zip
let ext = name.substr(name.lastIndexOf('.'))
cb(null, uuid.v4() + ext)
}
})
const uploadTools = multer({
storage : obj
})
const uuid = require('uuid')
// 静态资源托管upload目录
server.use(express.static('upload'))//在这个文件夹内存文件，可以直接通过服务器端口/upload/文件名进行访问
// 指定web服务器的监听端口
server.listen(3000)
//接收请求
server.post('/upload',
uploadTools.array('uploadFile'), (req, res)=>{
console.log(req.files)
res.send('OK')
})
四、注意
因为跨域问题，一上传文件浏览器网页就会自动刷新，将文件放置于服务器相同位置，设置同一端口，就不会跨域，网页也不会自动刷新。