前端文件传输器：融合上传、预览与下载的强大工具

2023-08-02 02:20:51

征服下载的奥秘：从 URL 地址到 Blob 数据的完整指南

在前端开发中，文件下载是一个至关重要的技能，可以让你轻松地从网络或本地设备获取文件。本文将为你揭开文件下载的神秘面纱，从 URL 地址到 Blob 数据，手把手教你如何从不同来源提取文件。

从 URL 地址下载文件

下载文件最常见的方法是从 URL 地址开始。你可以使用 JavaScript 的 fetch() 函数轻松地实现这一点。fetch() 函数接受一个 URL 地址作为参数，它会向服务器发起一个 GET 请求以获取文件。

fetch('https://example.com/file.txt')
  .then(response => response.blob())
  .then(blob => {
    // 接下来可以对 blob 数据进行处理，例如存储或下载
  })
  .catch(error => {
    // 处理错误
  });

从 Blob 数据下载文件

Blob 数据是一种二进制数据，可以用来表示各种各样的文件类型。从 Blob 数据下载文件需要两个步骤：

使用 URL.createObjectURL() 函数生成一个临时的 URL。
创建一个 <a> 元素，将临时 URL 设置为其 href 属性，并触发点击事件。

const blob = new Blob(['Hello, world!']);
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'file.txt';
link.click();

// 下载完成后，释放临时 URL
URL.revokeObjectURL(url);

文件上传与下载的完美结合

文件下载固然重要，但文件上传同样不可忽视。使用 HTML5 的 File API 和 FormData() 对象，你可以轻松地将文件上传到服务器。

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => {
      // 处理服务器返回的数据
    })
    .catch(error => {
      // 处理错误
    });
});