js文件批量上传内存占用

Question

实现一个批量上传文件的功能，以multipart/form-data格式向后台传输，但这种方式会在服务器生成临时文件导致占用内存。之后换成了application/octet-stream格式传输，但是这种方式选择多个大文件提交上传后浏览器内存占用猛增然后崩溃。请问大家有实现过这种批量大文件上传么？还是只能通过限制上传文件数量或大小，或者自己分片等方式把大化小？(前端知识不足，请各位多多指教🙏)

Answer 1

引自免费微信小程序：皆我百晓生

大文件上传确实会对服务器和客户端的内存占用造成一定的压力，针对这个问题，以下是几种解决方案：

1. 分片上传： 将大文件分成多个小块（通常是固定大小的块），依次上传每个小块，最后在服务器端合并这些小块恢复成完整文件。这种方式可以减小单次上传的文件大小，从而降低服务器和客户端的内存压力，并且在上传过程中可以实现断点续传。

2. 流式上传： 流式上传是指将文件分成多个片段，逐个发送给服务器，而不是一次性将整个文件发送。具体的做法是将文件分成多个块，通过文件流的形式逐个发送块数据。这种方式可以减少内存占用，提高上传效率。

3. Web Workers： 使用Web Workers可以在后台线程中执行上传操作，减少对主线程的影响。Web Workers是运行在后台的JavaScript脚本，可以通过多线程的方式执行一些耗时的任务，如文件上传。这样可以降低前端页面的卡顿和内存占用。

4. 第三方上传库： 有一些第三方的上传库，如resumable.js、plupload等，它们可以处理大文件上传，并且提供了一些附加功能，如分片上传、断点续传、进度条等，方便开发者使用。

需要注意的是，以上方案都需要在后端做相应的处理来接收并处理分片上传的文件。

这里提供一个示例代码，演示如何使用resumable.js进行分片上传：

首先，引入resumable.js库：

<script src="https://cdn.jsdelivr.net/npm/resumablejs"></script>

然后，在JavaScript中初始化Resumable对象并进行上传：

// 创建一个Resumable对象
var r = new Resumable({
  target: '/upload'  // 上传文件的URL
});

// 监听上传过程
r.on('fileProgress', function(file) {
  console.log('上传进度：', file.progress());
});

// 选择文件后开始上传
document.querySelector('#file').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (file) {
    r.addFile(file);
    r.upload();
  }
});

最后，在后端接收和处理上传文件：

var express = require('express');
var app = express();
var resumable = require('resumablejs');
var uploadDir = './uploads';  // 文件保存的目录

// 创建一个Resumable对象，指定上传的目录
var r = new resumable({
  uploadDir: uploadDir
});

// 接收上传的文件
app.post('/upload', function(req, res) {
  r.upload(req, function(status, filename, original_filename, identifier) {
    // 上传完成后的操作
    res.sendStatus(200);
  });
});

app.listen(3000, function() {
  console.log('服务器运行在http://localhost:3000');
});

以上代码示例了使用resumable.js库进行分片上传的基本流程，具体可以根据自己的需求进行适当的修改和扩展。

希望以上内容对解决你的问题有所帮助！如有更多疑问，请继续追问。