如何使用 JavaScript 实现文件的上传和下载？

推荐答案

文件上传

使用 HTML <input type="file"> 元素结合 JavaScript 的 FormData 对象和 fetch 或 XMLHttpRequest 可以实现文件上传。

HTML:

<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传文件</button>

JavaScript:

// www.javascriptcn.com code example
async function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) {
    alert("请选择要上传的文件！");
    return;
  }

  const formData = new FormData();
  formData.append('file', file); // 'file' 是服务器端接收文件的字段名，可根据需要更改

  try {
    const response = await fetch('/upload', { // '/upload' 是你的服务器端上传接口
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const result = await response.json();
      alert('文件上传成功！' + JSON.stringify(result)); // 处理服务器返回的 JSON 数据
    } else {
      alert('文件上传失败！' + response.status);
    }
  } catch (error) {
    console.error('上传过程中发生错误：', error);
    alert('上传过程中发生错误！');
  }
}

核心解释

1. 通过 <input type="file"> 获取用户选择的文件。
2. 创建一个 FormData 对象。
3. 使用 formData.append('file', file) 添加文件数据（file 是服务器端接收文件的字段名）。
4. 使用 fetch 发起 POST 请求到服务器端上传接口。
5. 根据服务器响应处理上传成功或失败的情况。

文件下载

文件下载可以通过设置 HTML <a> 元素的 href 属性为文件 URL，或使用 fetch 获取文件并将其作为 Blob 对象处理。

方法一：使用 <a> 标签（适用于已知文件 URL）

<a id="downloadLink" href="/files/example.pdf" download="example.pdf">下载文件</a>

HTML: <a id="downloadButton" href="#">下载文件(方法二)</a> JavaScript (方法二)：使用 fetch 和 Blob

// www.javascriptcn.com code example
async function downloadFile() {
    const downloadButton = document.getElementById('downloadButton');
    try {
        const response = await fetch('/files/example.pdf'); //  '/files/example.pdf' 是你的服务器端文件地址

        if (!response.ok) {
            throw new Error(`下载失败，状态码: ${response.status}`);
        }

        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.pdf'; // 设置下载时的文件名
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url); // 释放 URL 对象
        document.body.removeChild(a);
    } catch (error) {
        console.error('下载过程中发生错误:', error);
        alert('下载过程中发生错误！');
    }
}
downloadButton.onclick = downloadFile;

核心解释

1. 方法一 (使用 <a> 标签)

   • 直接使用 <a> 标签的 href 属性指向文件 URL。
   • download 属性指定下载时的文件名。

2. 方法二 (使用 fetch 和 Blob)

   • 使用 fetch 获取文件数据。
   • 将响应转换为 Blob 对象。
   • 使用 URL.createObjectURL(blob) 创建一个 Blob URL。
   • 创建一个临时的 <a> 标签，设置其 href 为 Blob URL，并模拟点击实现下载。
   • 使用 URL.revokeObjectURL(url) 释放创建的 URL 对象。

本题详细解读

文件上传的详细解读

HTML <input type="file">

• <input type="file"> 元素允许用户从本地文件系统中选择一个或多个文件。
• multiple 属性可以允许多文件选择。
• accept 属性可以限制选择的文件类型（例如：accept="image/*" 只允许选择图片）。
• 使用 JavaScript 可以通过 files 属性获取用户选择的文件列表，它是一个 FileList 对象。

JavaScript FormData

• FormData 对象提供了一种构造键值对集合的方式，用于通过 XMLHttpRequest 或 fetch 发送表单数据。
• FormData.append(name, value) 方法用于添加一个键值对，其中 value 可以是字符串或 File 对象。
• 对于文件上传，通常使用 FormData 来封装文件数据，并发送给服务器。

fetch API

• fetch API 提供了一种现代的方式来发起网络请求。
• 它返回一个 Promise 对象，用于处理异步操作。
• fetch 的第一个参数是请求的 URL，第二个参数是一个配置对象，其中包含了请求方法（method）、请求头（headers）和请求体（body）。
• 对于文件上传，需要将请求方法设置为 POST，并将 FormData 对象作为 body 发送。

服务端处理

• 服务端需要接收并处理上传的文件，这通常包括：
  • 接收 FormData 发送的文件数据。
  • 将文件保存到服务器的文件系统中或云存储中。
  • 返回一个 JSON 响应，包含上传结果。

文件下载的详细解读

HTML <a> 标签

• <a> 标签用于创建超链接。
• href 属性指定链接的目标 URL，可以是绝对 URL 或相对 URL。
• download 属性（可选）指定下载时的文件名。
• 对于文件下载，可以将 href 指向文件 URL，浏览器会自动触发下载。

JavaScript fetch 和 Blob

• 当文件 URL 不直接可用，或者需要动态处理下载时，可以使用 fetch 获取文件数据。
• fetch 获取到的响应需要通过 response.blob() 方法转换为 Blob 对象。
• Blob (Binary Large Object) 表示一个不可变的，原始数据的类似文件的对象。
• URL.createObjectURL(blob) 创建一个临时的 URL，指向 Blob 对象。
• URL.revokeObjectURL(url) 释放创建的 URL 对象，避免内存泄漏。
• 需要创建一个临时的 <a> 标签，并模拟点击它，才能触发下载。

服务端处理

• 对于需要动态生成文件的情况，服务器端需要：
  • 根据请求生成文件数据。
  • 设置正确的 Content-Type 和 Content-Disposition HTTP 头。
  • 将文件数据返回给客户端。