Vue前端如何将Croppie生成的裁剪图片转为标准Input File类型文件对象

问题原因 #

你在子组件的setImage方法中已经通过new File([blob], "File name", {type: blob.type})生成了标准的File类型对象，通过$emit传给父组件的freshImg参数本身就符合要求，不需要额外调用fetch请求blob URL。fetch返回的是Response对象，直接赋值自然不符合File类型要求。

最优解决方案 #

直接使用传入的freshImg即可，完全可以复用原有input选择文件的处理逻辑，父组件代码修改如下：

freshImage(freshImg){  
    // 直接赋值即可，freshImg本身就是合法File对象
    this.selectedFile = freshImg;
    this.url = URL.createObjectURL(freshImg);
    console.log(this.selectedFile);
    console.log(this.url);
}

特殊场景：如果需要从Response对象提取File #

如果你的业务逻辑必须走fetch请求流程，可以通过以下步骤提取File：

1. 调用Response.blob()方法从Response中提取二进制Blob内容
2. 再将Blob转为File对象
   示例代码如下：

freshImage(freshImg){  
    const url = URL.createObjectURL(freshImg); 
    fetch(url)
    // 第一步：从Response中提取Blob
    .then(res => res.blob())
    .then(blob => {
        // 第二步：将Blob转为File对象
        const file = new File([blob], "裁剪头像.jpg", {type: blob.type})
        this.selectedFile = file;
        console.log(this.selectedFile);
        console.log(url);
    })
}

内容的提问来源于stack exchange，提问作者M.Koops