JS文件流或文件路径的上传及下载处理方式详解

2024-01-15 07:15:01

一、文件下载

文件下载是指将远程服务器上的文件传输到本地计算机的过程。在JS中，我们可以使用fetch()方法来实现文件下载。fetch()方法是一个异步函数，它会返回一个Promise对象。当Promise对象被解析时，表示文件下载完成，此时我们就可以使用Blob对象来获取文件数据。

fetch('https://example.com/file.txt')
  .then(response => response.blob())
  .then(blob => {
    // 使用Blob对象处理文件数据
  });

二、文件上传

文件上传是指将本地计算机上的文件传输到远程服务器的过程。在JS中，我们可以使用FormData对象来实现文件上传。FormData对象是一个用于收集表单数据的对象，它可以包含文件数据。

const formData = new FormData();
formData.append('file', fileInput.files[0]);

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

三、数据来源

文件下载和文件上传的数据来源可以是文件路径或二进制流文件数据。

文件路径： 文件路径是指本地计算机上文件的绝对路径。我们可以使用File对象来获取文件路径。

const file = document.querySelector('input[type=file]').files[0];
const filePath = file.path;

二进制流文件数据： 二进制流文件数据是指文件内容的二进制表示。我们可以使用FileReader对象来读取二进制流文件数据。

const fileReader = new FileReader();
fileReader.onload = function() {
  const binaryData = fileReader.result;
};
fileReader.readAsBinaryString(file);

四、上传文件类型

JS中可以上传的文件类型包括但不限于：

图片： 如.jpg、.png、.gif等。
文档： 如.doc、.docx、.pdf等。
表格： 如.xls、.xlsx、.csv等。
视频： 如.mp4、.mov、.avi等。
音频： 如.mp3、.wav、.ogg等。

五、具体操作步骤

创建File对象或FileReader对象：
- 如果数据来源是文件路径，则创建一个File对象。
- 如果数据来源是二进制流文件数据，则创建一个FileReader对象。
获取文件数据：
- 如果数据来源是文件路径，则使用FileReader对象读取文件数据。
- 如果数据来源是二进制流文件数据，则直接使用二进制流文件数据。
创建FormData对象：

创建一个FormData对象，并将文件数据添加到FormData对象中。
发送请求：

使用fetch()方法发送请求，并将FormData对象作为请求体。
处理服务器返回的数据：

当fetch()方法的Promise对象被解析时，表示文件上传或下载完成。此时我们可以使用服务器返回的数据进行后续处理。