将FileReader base64存储为变量？ Javascript

Question

我正在尝试将上传的文件/简历的base64值存储到变量中，但我一直收到此错误：

Uncaught (in promise) TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type '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的结构：

<script>
$(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);


       });
    }) 
</script>

我尝试使用没有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(file, onLoadCallback) {
        return new Promise(function(resolve, reject) {
            var reader = new FileReader();
            reader.onload = function() {
                resolve(reader.result);
            };
            reader.onerror = reject;
            reader.readAsDataURL(file[0]);
        });
    }




    $('.applicantForm').on('submit', async function(e) {
        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, this.value);

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


    });
})