Сохранить FileReader Base64 как переменную?

Question

Я пытаюсь сохранить значение base64 загруженного файла / резюме в переменную, но получаю эту ошибку:

Uncaught (в обещании) TypeError: Не удалось выполнить readAsDataURL в «FileReader»: параметр 1 не относится к типу «Blob».

Вот структура моего HTML:

<div class="container" id="json-response" >
    <div class="form-container">
        <div class="header">
            <h1>Application form</h1>
        </div>
        <form action="#"  class="applicantForm">
            <div class="input-group" id="files">
                    <label for="Resume">Resume <span></span></label>
                    <input class="form-control" type="file" name="resume">
            </div>

            </div>
            <button class="submit" type="submit">Apply Now</button>
        </form>
    </div>
</div>

Вот структура моего JavaScript:

$(document).ready(function() {

const ApplyOpeningPayloadBuilder = function() {

let payload = {
    "fields": [],
    "source" : "new fellow"
};

return {
    withFile: function(key, encoded_data, filename) {
        let value = {};
            value.encoded_data = encoded_data;
            value.file_name = filename;
            this.withKeyValue(key, value);
            return this;
            },
             build: function() {
                    return payload;
              }
    }
}

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


let files = document.getElementById('file').files;


$('.applicantForm').on('submit',async function(e) {

e.preventDefault();
let promise = getBase64(files);
let encoded_file4 = await promise;

apply_for_an_opening_payload_builder.withFile("resume", encoded_file4, this.value);

let payload = apply_for_an_opening_payload_builder.build();
console.log("Log payload:", payload);


       });
    }) 

Я пытался использовать обещание без async, но оно тоже не сработало. Я думаю, что это необходимо. Я не могу думать ни о каком другом подходе или любой другой работе вокруг. Любые идеи?

Answer 1

У вас есть пара ошибок в вашем примере. Во-первых, ваше поле input не имеет атрибута id, поэтому document.getElementById('file').files; не будет преобразован в элемент. Вы передаете массив files в getBase64, но getBase64 ожидает один файл. Наконец, вам нужно прочитать файлы при отправке формы, а не при загрузке страницы. Ниже обновленный скрипт.

<div class="container" id="json-response" >
    <div class="form-container">
        <div class="header">
            <h1>Application form</h1>
        </div>
        <form onsubmit="return false"  class="applicantForm">
            <div class="input-group" id="files">
                    <label for="Resume">Resume <span></span></label>
                    <input class="form-control" type="file" name="resume" id="file">
            </div>


            <button class="submit" type="submit">Apply Now</button>
        </form>
    </div>
</div>

$(document).ready(function() {
    const ApplyOpeningPayloadBuilder = function() {

        let payload = {
            "fields": [],
            "source": "new fellow"
        };

        return {
            withFile: function(key, encoded_data, filename) {
                let value = {};
                value.encoded_data = encoded_data;
                value.file_name = filename;
                this.withKeyValue(key, value);
                return this;
            },
            build: function() {
                return payload;
            }
        }
    }

    function getBase64(files, onLoadCallback) {
        return new Promise(function(resolve, reject) {
            var reader = new FileReader();
            reader.onload = function() {
                resolve(reader.result.substr(reader.result.indexOf(',') + 1));
            };
            reader.onerror = reject;
            reader.readAsDataURL(files[0]);
        });
    }




    $('.applicantForm').on('submit', async function(e) {
        e.preventDefault();

        let files = document.getElementById('file').files;


        let promise = getBase64(files);
        let encoded_file4 = await promise;
        alert(encoded_file4)
        apply_for_an_opening_payload_builder.withFile("resume", encoded_file4, files[0].name);

        let payload = apply_for_an_opening_payload_builder.build();
        console.log("Log payload:", payload);


    });
})