文件上传

文件上传的消息格式

文件上传的本质仍然是一个数据提交，无非就是数据量大一些而已。

在实践中，人们逐渐的形成了一种共识，文件上传默认使用POST请求。

POST 上传地址 HTTP/1.1
其他请求头
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="小仙女.jpg"
Content-Type: image/jpeg

(文件二进制数据)
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="username"

admin
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="password"

123123
----WebKitFormBoundary7MA4YWxkTrZu0gW

• 除非接口文档特别说明，文件上传一般使用POST请求
• 接口文档中会规定上传地址，一般一个站点会有一个统一的上传地址
• 除非接口文档特别说明，请求头中Content-type字段的值一般为multipart/form-data，浏览器会自动分配一个定界符boundary
• 请求体的格式是一个被定界符boundary分割的消息，每个分割区域本质就是一个键值对
• 除了键值对外，multipart/form-data允许添加其他额外信息，比如文件数据区域，一般会把文件在本地的名称和文件MIME类型告诉服务器

文件上传的实现

示例

统一上传接口

请求路径： /api/upload

请求方法： POST

字段：

字段名	数据类型	含义	是否必传
file	file	文件	是

尺寸限制： 1M

支持的文件后缀： .jpg, .jpeg, .gif, .png, .bmp, .webp

上传成功的响应：

{
	code: 0,
	msg: "",
	data: "http://localhost:8000/upload/a32d18.jpg" // 访问路径
}

可能发生的失败响应：

{
	code: 403,
	msg: "文件超过了限制",
	data: null
}
{
	code: 403,
	msg: "无效的文件类型",
	data: null
}

代码示例

<input type="file" id="fileUploader" />
<img src="" id="avatar" alt="" />

const fileUploader = document.querySelector('#fileUploader');
const avatar = document.querySelector('#avatar');
fileUploader.onchange = async function() {
	// 一般先会在这里对文件进行验证
    // console.log(fileUploader.files);

    // 上传文件
    const formData = new FormData();
    formData.append('file', fileUploader.files[0]); // 添加一个键值对

    const resp = await fetch('http://localhost:8000/api/upload', {
      method: 'POST',
      body: formData,
    }).then((resp) => resp.json());
    doms.avatar.src = resp.data;
}