我通过在浏览器上读取文件并将其附加到隐藏输入来解决这个问题:
HTML:
<form id="choose-profile-img" method="POST" enctype="multipart/form-data">
<label for="select-profile-img">Choose profile image</label>
<input
type="file"
id="select-profile-img"
class="hidden"
name="rawfile"
accept="image/png, image/jpeg"
multiple
/><br/>
<input type="hidden" name="base64" id="base64Data">
<button>Upload</button>
</form>
JavaScript:
const avForm = doc.getElementById("choose-profile-img");
avForm.addEventListener('submit', (e) => {
e.preventDefault();
const avatar = doc.getElementById("select-profile-img").files[0];
const reader = new FileReader();
// Convert file to base64 string
reader.addEventListener("load", () => {
const base64 = doc.getElementById("base64Data");
base64.value = reader.result;
const formData = new FormData(avForm);
// send the formData with XMLHttpRequest();
}, false);
if (avatar) {
reader.readAsDataURL(avatar);
}
});
很简单。