js 上传文件流

在JavaScript中，上传文件流通常涉及到使用FileReader API来读取用户选择的文件，并通过XMLHttpRequest或fetch API将文件流发送到服务器。以下是关于JS上传文件流的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案的详细解释：

基础概念

FileReader API: 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
Blob对象: 表示不可变的原始数据的类文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
XMLHttpRequest/Fetch API: 用于与服务器交互，发送HTTP请求和接收响应。Fetch API是XMLHttpRequest的现代替代品，提供了更强大和灵活的功能。

优势

减少内存消耗: 通过流式传输，可以边读取文件边上传，而不需要等待整个文件加载到内存中。
提高用户体验: 用户可以在文件上传的同时继续浏览或执行其他操作。
支持大文件上传: 流式传输使得上传大文件成为可能，因为数据可以分块发送。

类型

文本文件流: 读取和上传文本文件。
二进制文件流: 读取和上传图片、视频等二进制文件。

应用场景

文件上传功能: 用户可以通过网页上传文件到服务器。
实时视频流处理: 将视频流直接上传到服务器进行处理。
大数据分析: 上传和分析大型数据集。

可能遇到的问题及解决方案

问题1: 文件上传进度无法显示

原因: 没有正确使用XMLHttpRequest的progress事件或fetch API的流式响应。

解决方案:

使用XMLHttpRequest时，监听progress事件来更新上传进度。
使用fetch API时，可以使用ReadableStream来处理上传进度。

// 使用 XMLHttpRequest 显示上传进度
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Upload progress: ${percentComplete}%`);
  }
});
xhr.open('POST', '/upload');
xhr.send(file);

// 使用 Fetch API 显示上传进度（需要服务器支持）
async function uploadFile(file) {
  const response = await fetch('/upload', {
    method: 'POST',
    body: file,
  });
  const reader = response.body.getReader();
  const contentLength = response.headers.get('Content-Length');
  let receivedLength = 0;
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    receivedLength += value.length;
    const percentComplete = (receivedLength / contentLength) * 100;
    console.log(`Upload progress: ${percentComplete}%`);
  }
}

问题2: 文件上传失败

原因: 可能是网络问题、服务器配置问题或客户端代码问题。

解决方案:

检查网络连接。
确保服务器端正确处理文件上传请求。
使用try-catch块捕获并处理异常。

try {
  const response = await fetch('/upload', {
    method: 'POST',
    body: file,
  });
  if (!response.ok) {
    throw new Error('Upload failed');
  }
  console.log('Upload successful');
} catch (error) {
  console.error('Error uploading file:', error);
}