如何将多个文件转换为Base64字符串？

Question

我有一个类似这样的组件。

<input type="file" multiple @change="toBase64Handler($event)">

<script>
 data() {
  return {
     files: [],
   }
 },
 methods: {
  tobase64Handler(event) {
   // the code
  }
 }
</script>

我希望将所有选定的文件转换为Base64字符串，类似于以下内容：

files: [
  {
   selectedFile: 'ajsdgfauywdljasvdajsgvdasdo1u2ydfouayvsdlj2vo8ayasd...'
  },
  {
   selectedFile: 'askdhgoiydvywdljasvdajsgvdasdo1u2ydfoakjgsfdjagswsd...'
  },
  {
   selectedFile: '12edashjvlsljasvdajsgvdasdo1u2ydfouayvsdlj2vo8ayfsd...'
  },
]

我该如何实现这个目标？

- dunhilblack

---

可能是如何在JavaScript中将文件转换为base64？的重复问题。 - Fab

我似乎无法访问FileList的索引:/ - dunhilblack

Answer 1

您可以循环遍历文件，调用辅助方法toBase64，将所有Promises推送到一个数组中，并解决它们：

  toBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  };

  async tobase64Handler(files) {
    const filePathsPromises = [];
    files.forEach(file => {
      filePathsPromises.push(this.toBase64(file));
    });
    const filePaths = await Promise.all(filePathsPromises);
    const mappedFiles = filePaths.map((base64File) => ({ selectedFile: base64File }));
    return mappedFiles;
  }

- Simon Thiel

---

太好了，谢谢Simon！ - Hong Ly

非常酷，从未像await Promise.all()这样内联使用过Promise。干杯！ - HaulinOats

Answer 2

这应该可以解决问题：JSON.stringify(files)，你可以在这里阅读更多相关信息。如果你想将其转换回原始数组、对象或值，那么你需要使用JSON.parse(files)。你可以在这里阅读更多相关信息。

更新：事实证明我错了，JSON.stringify/parse不能用于文件（感谢@patrick evans提供的信息）。找到了这个答案，它似乎更好（由@ahmed hamdy提供）。

- person13

---

JSON.stringify不会将File/Blob对象转换为其内容的base64编码字符串。同样地，JSON.parse也不会解析base64字符串并将其转换为File/Blob。 - Patrick Evans