如何在vue前端将base64图像转换为类似于输入文件类型的文件

Question

我的应用程序有一个编辑窗口，用户可以在其中选择并上传配置文件图像。

我使用以下方法：

onFileChange(e){ 

this.selectedFile = e.target.files[0];
console.log(this.selectedFile);
this.url = URL.createObjectURL(this.selectedFile);
}

文件this.selectedFile将被上传到后端。这很有魅力。

控制台反映加载的文件，如：

File {name: 'IMG_6736.jpg', lastModified: 1529420030000, lastModifiedDate: Tue Jun 19 2018 16:53:50 GMT+0200 (Central European Summer Time), webkitRelativePath: '', size: 1307592, …}
blob:http://localhost:8000/deaf3008-e989-4db5-8ee4-41e7cc618916

现在我创建了一个croppie组件并将其添加到页面中。Croppie生成64base格式的裁剪图像结果。

计划是将croppie中的文件也分配给this.selectedFile，并像上面描述的输入字段中的文件一样处理它。

因此，我尝试转换它，并将生成的文件发送到父组件。这也很好，除了它不是我向上发送的带有$emit。。。

setImage(){
this.croppie.result({
type:'blob',
size:'viewport'
})
.then(blob =>{
const file = new File([blob], "File name", {type: blob.type})
this.$emit('updateImage', file);
});
}

在父组件中，它由处理

freshImage(freshImg){  
const url = URL.createObjectURL(freshImg); 
fetch(url).then(file => {
console.log(file)
console.log(url);
//this.selectedFile = file;
})
}

现在控制台显示：

[object Response]
blob:http://localhost:8000/a4e212c3-d9e7-48b7-bd0b-cb99eadeebc9

有人能帮我把文件从响应对象中取出吗？

Answer 1

令人困惑的是，我在谷歌上发现了一个描述：如何将Base64字符串转换为javascript文件对象，如从文件输入表单中转换为as？

解决方案是：

第一个从输入中获取文件并存储在此。选择文件

onFileChange(e){ 

this.selectedFile = e.target.files[0];

}

然后由Croppie处理(不包括代码(，并从Croppie发送结果：(我相信这是一个blob url(

setImage(){
this.croppie.result({
type:'canvas',
size:'viewport'
})
.then(blob =>{          
this.$emit('updateImage', blob);
});
} 

然后将其转换为javascript文件。文件名取自

<input type="file">

则该.selectedFile被分配转换后的croppie结果

freshImage(freshImg){  
fetch(freshImg)
.then(res => {return res.arrayBuffer();})
.then(buf => {return new File([buf], this.selectedFile.name, {type:'image/png'});})
.then(file => { 
this.selectedFile = file;
} );