el-upload多选文件上传出错解决指南

2024-02-23 10:45:14

在项目开发中，el-upload组件用于实现文件上传功能。为了满足用户需求，我试图通过增加一个参数来实现多选文件上传。然而，实际操作过程中，我遇到了一些意想不到的问题，导致文件上传报错。经过一番探索和研究，我发现了问题的根源，并找到了相应的解决方案。现在，我将与大家分享这些经验，帮助大家快速解决 el-upload 多选文件上传报错问题。

问题背景

在项目中，需要实现多选文件上传功能，因此我在 el-upload 组件的代码中添加了 multiple 参数，如下所示：

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <input type="file" multiple accept=".jpg,.png,.gif,.doc,.docx,.pdf" />
</el-upload>

当我运行代码时，却发现文件上传失败，控制台出现了错误提示：“TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'”。

分析问题

通过仔细分析错误提示，我发现问题出在 FileReader 的 readAsArrayBuffer 方法上。该方法用于将 Blob 对象转换成 ArrayBuffer 对象，以便进行后续处理。然而，在多选文件上传的情况下，传递给 readAsArrayBuffer 方法的参数不是 Blob 对象，而是 FileList 对象。

解决办法

为了解决这个问题，需要将 FileList 对象转换为 Blob 对象。可以通过以下步骤实现：

创建一个新的 FormData 对象。
将每个 File 对象添加到 FormData 对象中。
使用 FormData 对象作为参数调用 readAsArrayBuffer 方法。

修改后的代码如下：

const formData = new FormData();
for (let i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

const reader = new FileReader();
reader.readAsArrayBuffer(formData);