❤️ 点赞关注，支持更多内容！前端解决文件传输，需要掌握哪些知识储备，深度学习，持续更新！

十九八万里

已于 2024-05-26 14:25:28 修改

阅读量719

点赞数 35

文章标签：前端深度学习

于 2024-05-19 23:07:53 首次发布

本文链接：https://blog.csdn.net/weixin_56075623/article/details/139050523

版权

❤️ 点赞关注，支持更多内容！

前端文件传输，需要掌握哪些知识储备，持续更新！

1. HTTP协议

GET和POST请求: 了解如何使用GET请求获取文件，使用POST请求提交数据并下载文件。
Content-Type和Content-Disposition: 理解如何设置和解析这些HTTP头，以确保文件正确下载。

2. 前端技术

JavaScript: 熟悉基础的JavaScript语法和操作，如创建请求、处理响应等。
Fetch API / XMLHttpRequest: 了解如何使用Fetch API或XMLHttpRequest来发起HTTP请求。
Blob和File API: 学习如何使用Blob对象和File API来处理文件数据。

3. 浏览器API

URL.createObjectURL: 了解如何使用这个方法将Blob对象转换为可下载的URL。
a标签的download属性: 知道如何通过设置a标签的download属性来触发文件下载。

4. 安全和性能考虑

跨域问题: 了解CORS（跨域资源共享）以及如何配置服务器和前端以允许跨域请求。
大文件处理: 了解如何处理和优化大文件的下载，以避免内存问题和提高下载速度。

实践步骤（先进行一个基础的了解）

1. 发起请求

使用Fetch API来获取文件数据：

fetch('https://example.com/file')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'filename.ext'; // 设置下载文件的名字
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => console.error('Error downloading file:', error));

2. 处理CORS–后端需要做的

确保服务器允许跨域请求，设置CORS头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

3. 使用a标签的download属性

在某些情况下，直接使用a标签可以简单地触发下载：

<a href="https://example.com/file" download="filename.ext">Download</a>

下面我们开始深入

1 HTTP协议

GET和POST请求

GET请求用于从服务器获取数据（如下载文件）。
POST请求用于向服务器发送数据（如上传文件）并可能接收返回的数据。

Content-Type

官网介绍链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type

表示标头用于指示资源的原始媒体类型（在发送时应用任何内容编码之前）。

Content-Disposition

官网介绍链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition

Content-Disposition 是一个HTTP响应头，用于指示浏览器如何处理响应内容，特别是在下载文件时。它有两个主要的使用场景：

1. 内联显示文件（inline）

Content-Disposition: inline 指示浏览器直接在浏览器窗口内显示内容，而不是下载。这适用于浏览器能够直接处理和显示的文件类型，例如PDF、图像和文本文件。

HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: inline; filename="example.pdf"

在这种情况下，如果浏览器支持PDF文件，它会直接在浏览器窗口中显示文件内容。

2. 作为附件下载（attachment）

Content-Disposition: attachment 指示浏览器下载文件，而不是在浏览器窗口中显示。此模式通常用于需要用户下载并保存的文件。

Content-Disposition: attachment 指示浏览器下载文件，而不是在浏览器窗口中显示。此模式通常用于需要用户下载并保存的文件。

在这种情况下，浏览器会提示用户下载文件，并使用指定的文件名example.pdf保存文件。

使用场景：

1. 内联显示PDF文件

对于希望用户直接在浏览器中查看PDF文件而不是下载的场景，例如在线阅读器，使用 inline 是合适的。

HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: inline; filename="document.pdf"

2. 下载CSV文件

对于希望用户下载和保存文件的场景，例如导出数据为CSV文件时，使用 attachment 是合适的。

HTTP/1.1 200 OK
Content-Type: text/csv
Content-Disposition: attachment; filename="data.csv"

3. 下载图像文件

如果你提供一个图像下载链接，而不是在浏览器中显示图像，可以使用 attachment。

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Disposition: attachment; filename="photo.jpg"

4.前端实现文件下载

在前端通过JavaScript请求服务器提供的文件，并处理Content-Disposition以下载文件。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Download Example</title>
</head>
<body>
  <button id="download-btn">Download File</button>
  <script>
    document.getElementById('download-btn').addEventListener('click', async () => {
      try {
        const response = await fetch('https://example.com/file');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        // 使用服务器提供的文件名，解析Content-Disposition头
        const contentDisposition = response.headers.get('Content-Disposition');
        let filename = 'downloaded-file';
        if (contentDisposition) {
          const match = contentDisposition.match(/filename="(.+)"/);
          if (match && match[1]) {
            filename = match[1];
          }
        }
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('Error downloading file:', error);
      }
    });
  </script>
</body>
</html>

这个示例展示了如何通过Fetch API请求文件，并解析 Content-Disposition 头以获取文件名进行下载。

2 前端技术

Fetch API / XMLHttpRequest

Fetch API: 更现代的方式，基于Promise。

fetch('https://example.com/file')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'filename.ext';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => console.error('Error downloading file:', error));

XMLHttpRequest: 旧的方式，基于回调。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file', true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'filename.ext';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  }
};
xhr.send();

使用jQuery的Ajax方法下载文件
详细解释
1. Ajax请求:
  - url: 文件的URL。
  - method: HTTP请求方法，这里使用GET。
  - xhrFields.responseType: 设置响应类型为blob，以便正确处理文件数据。
2. 处理响应:
  - success回调函数在请求成功时执行，接收三个参数：数据（这里是Blob对象）、状态和XHR对象。
  - 从XHR对象的响应头中获取Content-Disposition，以提取文件名。
  - 使用window.URL.createObjectURL方法创建一个临时的URL，并将Blob对象绑定到该URL。
  - 创建一个不可见的<a>元素，并设置其href属性为临时URL，download属性为提取的文件名。
  - 触发该<a>元素的点击事件，以启动下载。
  - 使用window.URL.revokeObjectURL方法释放临时URL。

$.ajax({
  url: "https://example.com/file", // 替换为你的文件URL
  method: "GET",
  xhrFields: {
    responseType: "blob", // 重要：设置响应类型为blob
  },
  success: function (data, status, xhr) {
    // 从响应头中获取文件名
    const disposition = xhr.getResponseHeader("Content-Disposition");
    let filename = "downloaded-file";
    if (disposition && disposition.indexOf("attachment") !== -1) {
      const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
      const matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) {
        filename = matches[1].replace(/['"]/g, "");
      }
    }

    // 创建一个下载链接并触发点击事件
    const url = window.URL.createObjectURL(data);
    const a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  },
  error: function (xhr, status, error) {
    console.error("Error downloading file:", error);
  },
});

3 浏览器API

URL.createObjectURL

官网介绍链接：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL_static

作用：用于创建一个表示给定对象的临时URL，这些临时URL可以用于访问和引用由Blob、File或MediaSource对象表示的数据。它在处理文件下载、预览或在浏览器中显示动态生成的内容时非常有用。

主要用途

下载文件：在前端下载通过Blob对象创建的文件。
预览文件：在网页中预览用户上传的文件或动态生成的内容（如图像、视频等）。
动态生成内容：为动态生成的数据创建临时链接，比如在绘图应用中导出图像。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object URL Example</title>
</head>
<body>
  <a id="download-link" href="#">Download</a>
  <script>
    const blob = new Blob(["Hello, world!"], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const link = document.getElementById('download-link');
    link.href = url;
    link.download = 'hello.txt'; // 设置下载文件的默认名称
    link.textContent = 'Download the file';
  </script>
</body>
</html>

Blob

是JavaScript中的一个对象，表示不可变、原始数据的类文件对象。Blob对象包含的数据可以是文本、图像、视频等二进制数据。它通常用于处理文件、图像和其他二进制数据，并且在Web应用中非常常见。

Blob的特性

不可变：一旦创建，Blob的内容不能被改变。
原始数据：可以包含任意类型的二进制数据。
分段处理：可以使用Blob的slice方法对其内容进行分段处理。

创建Blob

可以通过new Blob()构造函数创建一个Blob对象。构造函数接受一个包含数据的数组和一个可选的对象来指定数据的类型和其他属性。

// 创建一个包含简单文本的Blob对象
const blob = new Blob(["Hello, world!"], { type: 'text/plain' });

// 创建一个包含JSON数据的Blob对象
const jsonBlob = new Blob([JSON.stringify({ key: 'value' })], { type: 'application/json' });