Кодирование Base64 файла в функции карты

Question

Мне нужно создать собственный массив файлов для отправки в REST.Я отправляю некоторые файлы в истинном виде, и мне нужно в base64 кодировать значение файла в массиве.

Какой лучший способ сделать это в React.Мне нужна часть файла содержимого для кодирования base64.Прямо сейчас я просто получаю следующее в моем consol.log.

0: "content: '[объектный файл]', fileName: 'download.jpg', contentType: 'image / jpeg', length: '16344 '"

1:" content:' [объектный файл] ', fileName:' download2.jpg ', contentType:' image / jpeg ', длина:' 8903 '"

Iнужно, чтобы [объектный файл] был закодирован в 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>