从前端页面上传文件到express服务器有如下几步：
- 前端发送一个post请求到某个api
- 服务器接收到post请求，处理请求数据
- 服务器将数据保存到服务器某个目录，并且静态托管那个目录(或者你可以专门写个api让前端可以get请求到这个资源，理论上)
- 前端通过get请求可以查看到上传的文件。
但是express不能直接处理文件上传请求:
- multer 的 github 中文文档
- express 默认不处理 HTTP 请求中的数据，需要使用 body-parsing 中间件比如 body-parser 和 multer 中间件。req.body
- multer(V1.2.0)是一个 node.js 中间件, 可以处理(并且只可以处理)multipart/form-data 类型的(表单)数据，主要用于上传文件。
- multer 会把请求中的表单文本信息和上传文件信息添加到 express 的 req 对象中。
操作如下：（此处简陋的操作只为演示，实际工作中就可以使用框架提供的强大功能）
1. 前端页面上传单个（提交）文件
- 首先使用类型为file的input元素（在web页面上）接受上传文件
- 然后建立一个xhr请求来post到服务器某个api
- 注意上传文件HTML操作的几个要点
- 使用type为file的input元素
- 创建FormData对象的实例，使用append方法添加input接收的文件（会是一个类数组）
- 将接收(append后)文件的FormData实例通过xhr send出去。
- 参考
//提示
<!DOCTYPE html>
当前端页面写好了接收上传文件的接口，并且向后端发起一个post请求后，就可以开始考虑后端接口的设计了。
2. 后端接口的填写
- 是一个post请求
- 前文已述，express不处理http请求 也就是req中的数据，比如处理上传文件的数据用到multer。
// 引入multer
const multer =require('multer');
const upload=multer({
dest:'uploads/'
})
// 托管静态文件,并且加个前缀uploads,为了安全规范
app.use('/uploads',express.static(__dirname+'/uploads'))
// 接口填写
app.post('/upload',upload.single('singlefile'),async(req,res)=>{
res.send(req.file)
})- 更多内容请参考文档
- 首先引入multer包，并实例化之，同时设定dest,值是一个文件夹名称，如上设置就会在服务器根目录添加对应的文件夹。
- 静态文件托管，为了规范化api接口，添加了uploads前缀（注意，只是与uploads文件夹名字相近，两者无关）
- 接口中使用了upload.single方法，基本上，其参数是上传的文件的名称，此处，这个名词的来源是formData中的设定。
- 注意（使用chrome浏览器），理论上，客户端可以接收到服务器响应。但是实际情况是页面在提交文件后会刷新，所以数据闪一下就会丢失，也就是不能算接收到数据。没搞清楚原因。只好把（VSCODE插件）live-serve关了，打开静态的index.html，这个时候页面不会刷新。在开启live-server的情况下，做了下面两个尝试：
- 用form表单提交也会刷新页面（已经阻止表单的默认提交会刷新页面的行为）
- 试了axios库的post方法也会刷新页面。
- 可以通过multer的更多设置来限制文件的类型、大小、是否保存文件名等等，比如下面：
const - 上面示范是提供简单思路，如果有需要，请直接参考multer文档。
- 上面的示范不能直接复用。
- 下面的连接提供的示范能直接复用，但是也不应该直接用于生产。
- 下面的示范使用live server时候就失效，只能静态开启index.html，再开启express服务器才能使用。
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
