Question

我需要创建自己的文件数组以发送到REST。我以格式发送了一些文件，并且需要对数组中的文件值进行base64编码。

在React中最好的方法是什么。我需要内容文件部分为base64编码。现在，我刚刚在consol.log中得到了以下内容。

0：“内容：'[目标文件]'，文件名：'download.jpg'，内容类型：'image / jpeg'，长度：'16344'”

1：“内容：'[目标文件]'，文件名：'download2.jpg'，内容类型：'image / jpeg'，长度：'8903'”

我需要[目标文件]经过base64编码。

var files = Array.from(values.file);
const filesToUpload = files.map((file) =>
"content: '" + file + "', fileName: '" + file.name + "', contentType: '" + file.type + "', length: '" + file.size + "'");
console.log(filesToUpload);

Answer 1

您可以使用FileReader来读取文件并输出Base64编码的数据。您必须将调用包装在Promise中，然后使用该映射来映射数组。

我为您准备了一个简单的示例。请注意，将File映射到返回Promise的函数时，必须等待所有Promise才能继续。

const input = document.querySelector ("#files");

function getBase64 (file) {
  return new Promise ((resolve, reject) => {
    const reader = new FileReader ();
    reader.readAsDataURL (file);
    reader.onload = _ => resolve (reader.result);
    reader.onerror = e => reject (e);
  });
}

input.onchange = () => {
  let files = Array.from (input.files);
  files = files.map (async file => ({
    content: await getBase64 (file),
    fileName: file.name,
    contentType: file.type,
    length: file.size
  }));
  Promise.all (files).then (result => console.log (result));
}

<input id="files" type="file" multiple>

地图功能中的Base64编码文件

1 个答案: