教程 ky tutorial

文件上传与下载

Ky 可以方便地处理文件上传与下载,支持 FormData 上传和响应数据下载。

文件上传

使用 FormData 进行文件上传:

javascript
import ky from 'ky';

const formData = new FormData();
formData.append('file', fileInput.files[0]); // fileInput 为 input[type="file"]

async function uploadFile() {
  try {
    const response = await ky.post('https://api.example.com/upload', {
      body: formData
    }).json();
    console.log('上传成功:', response);
  } catch (error) {
    console.error('上传失败:', error);
  }
}

uploadFile();

`

上传进度(浏览器支持)

Ky 本身不直接提供进度回调,但可以使用 fetch 的 ReadableStream 配合 Ky 自定义:

javascript
const response = await ky.post('https://api.example.com/upload', {
  body: formData
});
const reader = response.body.getReader();

(进度实现略,需要自行封装)

文件下载

下载文件并保存到本地:

javascript
import ky from 'ky';

async function downloadFile() {
  const blob = await ky.get('https://api.example.com/file.pdf').blob();
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'file.pdf';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

downloadFile();

小结

  • 文件上传通过 FormData 配合 POST 请求完成。
  • 文件下载通过 .blob() 获取文件数据,再生成下载链接。
  • Ky 轻量且兼容现代浏览器,可灵活处理上传和下载场景。