如何将多个文件转换为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...'
  },
]

我如何做到这一点？

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;
  }

Answer 2

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

更新：原来我错了，JSON.stringify/parse 不适用于文件（感谢@patrick evans 的信息）。 发现 this answer 似乎更好（@ahmed hamdy 的那个）