文件到 XHR 请求

在 Web 开发中，我们通常需要对文件进行上传或下载操作。XHR（XMLHttpRequest）对象是 JavaScript 中的一种 API，可以通过 HTTP 请求发起和接收数据。使用 XHR 请求可以实现文件上传和下载功能。

文件上传

创建 XHR 对象

首先，需要创建一个 XHR 对象。可以使用以下代码创建一个 XHR 对象：

let xhr = new XMLHttpRequest();

上传文件

上传文件需要进行如下几个步骤：

1. 创建一个 FormData 对象，并添加要上传的文件；
2. 使用 XHR 对象发送 FormData 对象。

以下是上传文件的代码示例：

let form = new FormData();
form.append('file', inputFile.files[0]); // inputFile 表示文件上传控件
xhr.open('POST', '/upload'); // 上传地址
xhr.send(form);

监听上传进度

我们还可以监听上传进度，以便及时更新用户上传进度。可以使用 onprogress 事件监听上传进度，具体代码如下：

xhr.upload.onprogress = (event) => {
  let percent = event.loaded * 100 / event.total;
  console.log(`上传进度：${percent.toFixed(2)}%`);
};

文件下载

创建 XHR 对象

同样，下载文件也需要创建一个 XHR 对象，代码如下：

let xhr = new XMLHttpRequest();

下载文件

下载文件需要进行如下几个步骤：

1. 打开一个 GET 请求；
2. 设置 responseType 属性为 'blob'；
3. 发送请求。

以下是下载文件的代码示例：

xhr.open('GET', '/download'); // 下载地址
xhr.responseType = 'blob';
xhr.onload = () => {
  if (xhr.status === 200) {
    let downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(xhr.response);
    downloadLink.download = 'download'; // 下载文件名
    downloadLink.click();
  }
};
xhr.send();

监听下载进度

我们也可以监听下载进度，以便及时更新用户下载进度。可以使用 onprogress 事件监听下载进度，具体代码如下：

xhr.onprogress = (event) => {
  let percent = event.loaded * 100 / event.total;
  console.log(`下载进度：${percent.toFixed(2)}%`);
};

以上就是文件到 XHR 请求的介绍，希望对你有所帮助。