UPD TypeScript版本也可在答案
现在我通过这一行获取File object:
file = document.querySelector('#files > input[type="file"]').files[0]
我需要通过json在基数64发送这个文件。我应该怎么做才能将其转换为base64字符串?
UPD TypeScript版本也可在答案
现在我通过这一行获取File object:
file = document.querySelector('#files > input[type="file"]').files[0]
我需要通过json在基数64发送这个文件。我应该怎么做才能将其转换为base64字符串?
当前回答
在搜索如何将文件对象转换为字符串时,此页是第一个匹配项。如果你不关心base64,这个问题的答案很简单:
str = await file.text()
其他回答
我用过这个简单的方法,而且效果很好
function uploadImage(e) {
var file = e.target.files[0];
let reader = new FileReader();
reader.onload = (e) => {
let image = e.target.result;
console.log(image);
};
reader.readAsDataURL(file);
}
JavaScript btoa()函数可用于将数据转换为base64编码的字符串
<div>
<div>
<label for="filePicker">Choose or drag a file:</label><br>
<input type="file" id="filePicker">
</div>
<br>
<div>
<h1>Base64 encoded version</h1>
<textarea id="base64textarea"
placeholder="Base64 will appear here"
cols="50" rows="15"></textarea>
</div>
</div>
var handleFileSelect = function(evt) {
var files = evt.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
}
};
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('filePicker')
.addEventListener('change', handleFileSelect, false);
} else {
alert('The File APIs are not fully supported in this browser.');
}
尝试使用FileReader类的解决方案:
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string
注意,.files[0]是一个File类型,它是Blob的子类型。因此它可以与FileReader一起使用。 请参阅完整的工作示例。
使用这种方法将任何文件转换为base64
_fileToBase64(file: File) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.toString().substr(reader.result.toString().indexOf(',') + 1));
reader.onerror = error => reject(error);
});
}
打印稿版本
const file2Base64 = (file:File):Promise<string> => {
return new Promise<string> ((resolve,reject)=> {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result?.toString() || '');
reader.onerror = error => reject(error);
})
}