文件上传

# 前端部分

* 通过 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 有对上传文件限制的传参，具体的可以查阅文档。