解决elementUI中el-upload同时上传多个文件调用多次接口的坑

前端

2023-09-28 20:23:24

ElementUI中El-Upload同时上传多个文件的常见问题

问题

在使用ElementUI的El-Upload组件时，当同时上传多个文件时，组件将这些文件分批上传，导致服务器收到多次上传请求。这会导致几个问题：

增加服务器压力： 每次上传请求都会占用服务器资源，同时上传多个文件会占用更多资源，增加服务器压力。
上传效率低： 由于每次上传请求都是单独进行的，因此上传多个文件时，整体上传效率会降低。
用户体验差： 用户在上传多个文件时，需要等待每次上传请求完成，整体上传过程漫长，影响用户体验。

解决方案

要解决这个问题，有几种方法：

1. 后端协商

与后端协商，修改上传接口，支持一次性上传多个文件。这样，前端只需要发起一次上传请求，即可将多个文件上传到服务器。

2. 定制上传接口

如果后端无法修改上传接口，可以定制一个专门处理同时上传多个文件的上传接口。这个接口采用分片上传的方式，将文件分成多个小块，逐块上传。这可以减少服务器压力，提高上传效率。

代码示例：

// 后端分片上传接口
const uploadUrl = '/upload-chunk';

// 前端分片上传代码
const file = document.getElementById('file-input').files[0];
const chunkSize = 1024 * 1024; // 每个分片大小为 1MB
const chunks = Math.ceil(file.size / chunkSize); // 计算分片数量

for (let i = 0; i < chunks; i++) {
  const start = i * chunkSize;
  const end = Math.min(file.size, start + chunkSize);
  const chunk = file.slice(start, end); // 获取文件分片

  const formData = new FormData();
  formData.append('chunk', chunk); // 添加文件分片
  formData.append('chunkIndex', i); // 添加分片索引
  formData.append('chunks', chunks); // 添加总分片数

  // 发送分片上传请求
  fetch(uploadUrl, {
    method: 'POST',
    body: formData,
  }).then((res) => {
    // 处理分片上传响应
  });
}

3. 合并文件

在前端将多个文件合并成一个文件，再上传到服务器。这可以减少上传请求次数，减轻服务器压力。

代码示例：

// 前端文件合并代码
const files = document.getElementById('file-input').files;
const mergedFile = new File([files], 'merged.zip', { type: 'application/zip' });

// 上传合并后的文件
const formData = new FormData();
formData.append('file', mergedFile);

// 发送上传请求
fetch('/upload', {
  method: 'POST',
  body: formData,
}).then((res) => {
  // 处理上传响应
});

4. 前端处理文件流

在前端使用JavaScript操作文件流，将多个文件的流合并成一个流，再上传到服务器。这也可以减少上传请求次数，减轻服务器压力。

代码示例：

// 前端文件流合并代码
const files = document.getElementById('file-input').files;
const reader = new FileReader();

reader.onload = function() {
  const blob = new Blob([reader.result]);

  // 上传合并后的文件流
  const formData = new FormData();
  formData.append('file', blob);

  // 发送上传请求
  fetch('/upload', {
    method: 'POST',
    body: formData,
  }).then((res) => {
    // 处理上传响应
  });
};

reader.readAsArrayBuffer(files[0]);

5. FormData

FormData对象可以将文件流和其他数据一起发送到服务器。我们可以使用FormData对象将多个文件的流和表单数据一起发送到服务器。这可以减少上传请求次数，减轻服务器压力。

代码示例：

// 使用 FormData 上传文件
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

// 发送上传请求
fetch('/upload', {
  method: 'POST',
  body: formData,
}).then((res) => {
  // 处理上传响应
});

6. 分片上传

分片上传是一种将文件分成多个小块，逐块上传到服务器的技术。这可以减少服务器压力，提高上传效率。

代码示例：

(参见代码示例2)

7. HTTP请求

我们可以使用XMLHttpRequest或Fetch API等技术发送HTTP请求，将文件上传到服务器。这些技术都支持分片上传，可以减轻服务器压力，提高上传效率。

代码示例：

// 使用 XMLHttpRequest 上传文件
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');

xhr.onload = function() {
  // 处理上传响应
};

const formData = new FormData();
formData.append('file', file);

xhr.send(formData);

总结

当需要同时上传多个文件时，需要注意El-Upload组件默认会将多选的文件分批上传，导致服务器收到多次上传请求。这会增加服务器压力，降低上传效率，影响用户体验。我们可以采用上述方法来解决这个问题，实现一次性上传多个文件的需求。

常见问题解答

为什么El-Upload组件默认将多选的文件分批上传？

为了兼容不同的浏览器和服务器环境，El-Upload组件默认采用分批上传的方式，确保文件上传的稳定性和安全性。
我应该使用哪种方法来同时上传多个文件？

根据实际需求和技术栈选择合适的方法。如果后端支持，后端协商是最佳选择；如果后端不支持，可以采用定制上传接口、合并文件、前端处理文件流等方法。
分片上传的优点和缺点是什么？

优点：
- 减少服务器压力
- 提高上传效率
- 支持大文件上传
缺点：
- 实现复杂，需要较高的技术能力
- 可能会增加上传时间
如何判断是否需要分片上传？

如果文件大小超过服务器支持的最大上传限制，或者网络环境较差，需要考虑采用分片上传。
有哪些工具可以帮助我实现分片上传？

可以使用一些开源库或服务来简化分片上传的实现，如：