[Javascript] 文件上传

AJAX 就是指在web应用程序中异步向服务器发送请求。

它的实现方式有两种，XMLHttpRequest 简称XHR和Fetch

以下是两者的对比

功能点	XHR	Fetch
基本的请求能力	✅	✅
基本的获取响应能力	✅	✅
监控请求进度	✅	❌
监控响应进度	✅	✅
Service Worker中是否可用	❌	✅
控制cookie的携带	❌	✅
控制重定向	❌	✅
请求取消	✅	✅
自定义referrer	❌	✅
流	❌	✅
API风格	Event	Promise
活跃度	停止更新	不断更新

上传接口

请求路径：/upload/single

请求方法：POST

消息格式：multipart/form-data

字段名称：avatar

允许的后缀名：['.jpg', '.jpeg', '.bmp', '.webp', '.gif', '.png']

最大尺寸：1M

响应格式：JSON

响应结果示例：

// 成功
{
  "data": "文件的访问地址"
}
// 失败：后缀名不符号要求
{
  "errCode": 1,
  "errMsg": "后缀名不符合要求"
}
// 失败：文件过大
{
  "errCode": 2,
  "errMsg": "文件过大"
}

Code：

const $ = document.querySelector.bind(document);
const doms = {
  img: $('.preview'),
  container: $('.upload'),
  select: $('.upload-select'),
  selectFile: $('.upload-select input'),
  progress: $('.upload-progress'),
  cancelBtn: $('.upload-progress button'),
  delBtn: $('.upload-result button'),
};

function showArea(areaName) {
  doms.container.className = `upload ${areaName}`;
}

function setProgress(value) {
  doms.progress.style.setProperty('--percent', value);
}

doms.selectFile.onchange = (e) => {
  const file = e.target.files[0];
  // 显示预览图
  const reader = new FileReader();
  reader.onload = (e) => {
    // 读取完成
    doms.img.src = e.target.result;
    showArea('progress');
    upload(file);
  };
  reader.readAsDataURL(file); // 将文件数据读取为 DataURL（base64编码）
};

function upload(file) {
  setProgress(0);
  // XHR
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://myserver.com:9527/upload/single'); // 配置请求
  xhr.upload.onprogress = (e) => {
    const percent = Math.floor((e.loaded / e.total) * 100);
    setProgress(percent);
  };
  xhr.onload = () => {
    showArea('result');
  };
  // xhr.abort(); // 中止请求
  const form = new FormData(); // 生成multipart/form-data格式的请求体
  form.append('avatar', file);
  xhr.send(form);
}