# 前端部分
* 通过 form 表单 的 input 标签即可从本地选择文件,input 的 type 属性需要设置为 file
* 需要注意的是,上传文件不是一定要将header 的 Content-Type 设置为 multipart、form-data 的
* 如果后端用 express 搭建服务器,并且用 multer 中间件来处理接收到的文件的话,就不需要这项设置:headers,'Content-Type': 'multipart/form-data',
* 但是上传文件的格式,必须是formdata的。
* 同时,body中的数据需要为formData格式
function upload(event) { const formData = new FormData(); formData.append('file', event.target.files[0]); fetch('/upload', { method: 'post', // headers: { // 'Content-Type': 'multipart/form-data', // }, body: formData, }).then(response => response.json()) .then((data) => { console.log(data); }); }
### 注意
* formdata的append方法的第一个参数不是随便填写的,需要和后端保持一致,如下是 通过 express 的 multer 中间件处理上传文件时的情况,不一致会报错。
# 后端部分
* express 可以通过中间件 multer 来处理接收到的文件。
* https://www.npmjs.com/package/multer
fetch
async function upload(url, formdata) { const ret = await fetch(url, { method: 'post', body: formdata }) console.log(ret) }
# 单类型单个文件上传
# 单类型多个文件上传
# 多类型多个文件上传
* multer 有对上传文件限制的传参,具体的可以查阅文档。
标签:文件,form,data,formData,multer,上传 From: https://www.cnblogs.com/anch/p/18578450