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字符串?
当前回答
我用过这个简单的方法,而且效果很好
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);
}
其他回答
通过添加扩展上述解决方案,并在需要的地方添加用例 能够遍历表单上的多个字段并获取它们的值 其中一个是文件,它导致了异步需求的问题
解决方法如下:
async collectFormData() {
// Create the file parsing promise
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
let form_vals = []
let els = [] // Form elements collection
// This is separate because wrapping the await in a callback
// doesn't work
$(`.form-field`).each(function (e) {
els.push(this) // add to the collection of form fields
})
// Loop through the fields to collect information
for (let elKey in els) {
let el = els[elKey]
// If the field is input of type file. call the base64 parser
if ($(el).attr('type') == 'file') {
// Get a reference to the file
const file = el.files[0];
form_vals.push({
"key": el.id,
"value": await toBase64(file)
})
}
// TODO: The rest of your code here form_vals will now be
// populated in time for a server post
}
这纯粹是为了解决处理多个字段的问题 以一种更流畅的方式
尝试使用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,这个问题的答案很简单:
str = await file.text()
const fileInput = document.querySelector('input');
fileInput.addEventListener('change', (e) => {
// get a reference to the file
const file = e.target.files[0];
// encode the file using the FileReader API
const reader = new FileReader();
reader.onloadend = () => {
// use a regex to remove data url part
const base64String = reader.result
.replace('data:', '')
.replace(/^.+,/, '');
// log to console
// logs wL2dvYWwgbW9yZ...
console.log(base64String);
};
reader.readAsDataURL(file);});
使用这种方法将任何文件转换为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);
});
}