javascript - 将 FileReader base64 存储为变量？

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 的结构:

$(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的 promise ，但这也不起作用。我认为确实有必要。 我想不出任何其他方法或任何其他解决方法。 有任何想法吗？

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);


    });
})