gpt4 book ai didi

javascript - 将 FileReader base64 存储为变量?

转载 作者:行者123 更新时间:2023-12-02 21:54:30 35 4
gpt4 key购买 nike

我尝试将上传文件/简历的 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 ,但这也不起作用。我认为确实有必要。我想不出任何其他方法或任何其他解决方法。有任何想法吗?

最佳答案

您的示例中有几个错误。首先,您的 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);


});
})

关于javascript - 将 FileReader base64 存储为变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60044076/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com