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

【问题标题】：how can I covert a base64 image to a file, similar to an Input File type, in a vue frontend如何在 vue 前端将 base64 图像转换为类似于输入文件类型的文件
【发布时间】：2022-01-06 16:27:11
【问题描述】：

我的应用程序有一个编辑窗口，用户可以在其中选择和上传个人资料图片。

我使用以下方法：


 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

这里有谁能帮我从响应对象中取出文件吗？

【问题讨论】：

标签： vue.js base64 croppie

【解决方案1】：

疑惑的是我在google上找到了一个描述：How to convert Base64 String to javascript file object like as from file input form?

解决办法是：

第一次从输入中获取文件并存储在this.selectedFile中

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">

然后 this.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;
            } );

【讨论】：