Как преобразовать файл в base64 в JavaScript?

Теперь я получаю объект File по этой строке:

file = document.querySelector('#files > input[type="file"]').files[0]

Мне нужно отправить этот файл через json в base 64. Что мне нужно сделать, чтобы преобразовать его в строку base64?

81 голос | спросил Vassiliy Vorobyov 29 MarpmTue, 29 Mar 2016 12:49:26 +03002016-03-29T12:49:26+03:0012 2016, 12:49:26

4 ответа


0

Если вы ищете решение, основанное на обещаниях, это код @ Дмитрия, адаптированный для этого:

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

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file).then(
  data => console.log(data)
);
ответил joshua.paling 9 +03002017-10-09T09:12:29+03:00312017bEurope/MoscowMon, 09 Oct 2017 09:12:29 +0300 2017, 09:12:29
0

JavaScript btoa () можно использовать для преобразования данных в строку в кодировке base64

ответил Pranav Maniar 29 MarpmTue, 29 Mar 2016 12:53:15 +03002016-03-29T12:53:15+03:0012 2016, 12:53:15
0

На основе ответов Дмитрия Павлутина и joshua.paling приведена расширенная версия, которая извлекает содержимое base64 (удаляет метаданные в начале), а также обеспечивает заполнение сделано правильно .

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      let encoded = reader.result.replace(/^data:(.*;base64,)?/, '');
      if ((encoded.length % 4) > 0) {
        encoded += '='.repeat(4 - (encoded.length % 4));
      }
      resolve(encoded);
    };
    reader.onerror = error => reject(error);
  });
}
ответил Arnaud P 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 13 Sep 2018 12:48:26 +0300 2018, 12:48:26
0

Вот пара функций, которые я написал, чтобы получить файл в формате json, который можно легко передать:

    //takes an array of JavaScript File objects
    function getFiles(files) {
        return Promise.all(files.map(file => getFile(file)));
    }

    //take a single JavaScript File object
    function getFile(file) {
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => { reader.abort(); reject(new Error("Error parsing file"));}
            reader.onload = function () {

                //This will result in an array that will be recognized by C#.NET WebApi as a byte[]
                let bytes = Array.from(new Uint8Array(this.result));

                //if you want the base64encoded file you would use the below line:
                let base64StringFile = btoa(bytes.map((item) => String.fromCharCode(item)).join(""));

                //Resolve the promise with your custom file structure
                resolve({ 
                    bytes: bytes,
                    base64StringFile: base64StringFile,
                    fileName: file.name, 
                    fileType: file.type
                });
            }
            reader.readAsArrayBuffer(file);
        });
    }

    //using the functions with your file:

    file = document.querySelector('#files > input[type="file"]').files[0]
    getFile(file).then((customJsonFile) => {
         //customJsonFile is your newly constructed file.
         console.log(customJsonFile);
    });

    //if you are in an environment where async/await is supported

    files = document.querySelector('#files > input[type="file"]').files
    let customJsonFiles = await getFiles(files);
    //customJsonFiles is an array of your custom files
    console.log(customJsonFiles);
ответил tkd_aj 26 J000000Thursday18 2018, 19:51:47

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132