0

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

我使用以下方法：


 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

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

4

1 回答 1

0

令人费解的是，我在 google 上找到了一个描述：如何将 Base64 String 转换为 javascript 文件对象，就像从文件输入表单中一样？

解决方案是：

第一个从输入中获取文件并存储在 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;
            } );
于 2021-11-30T13:06:20.290 回答