我正在尝试根据从Ionic的相机插件获得的一些base64数据创建文件。我正在使用从另一个stackoverflow的答案中获得的功能。 问题在于创建的文件的大小为:0,并且name属性似乎是我在创建时传递的Uint8array。
这是转换Base64数据的功能:(前两行带有注释,因为数据开头没有“ data:image / jpeg; base64”)
_dataURLtoFile(dataurl, filename) {
let //arr = dataurl.split(','),
//mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(dataurl),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:'image/jpeg'});
}
这是我在控制台中看到的:
File {name: Array(1), localURL: "archivo", type: {…}, lastModified: null, lastModifiedDate: null, …}
end: 0
lastModified: null
lastModifiedDate: null
localURL: "archivo"
name: [Uint8Array(268175)]
size: 0
start: 0
type: {type: "image/jpeg"}
__proto__: Object
答案 0 :(得分:1)
基于关于File
已被覆盖的问题的评论,我修改了该函数以使用Blob
而不是File
,然后它将生成一个{{1} }。
出于演示目的,我还用另一个函数覆盖了默认的File
。我还使它在DOM中输出文件,以表明它已加载正确的数据。
File
window.File = () => 'brokenfilefunction'
function dataURLtoFile(dataurl, filename) {
let bstr = atob(dataurl),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
// Something has overwritten File, so you can't use it
// return new File([u8arr], filename, {type:'image/jpeg'});
// Adding the blob to FormData converts it to an actual file
const formData = new FormData();
const blob = new Blob([u8arr], { type: 'image/jpeg' });
formData.append(filename, blob);
// Instead of getting the file, you could just send the formdata object in your request
const actualFile = formData.entries().next().value[1];
return actualFile;
}
const image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const file = dataURLtoFile(image, 'name');
console.log(file);
// Display image in dom for demo
const fr = new FileReader();
fr.onload = function () {
document.getElementById('image').src = fr.result;
}
fr.readAsDataURL(file);