typescript angular 2 - 从输入创建自己的 blob 损坏数据答案

【问题标题】：typescript angular 2 - creating own blob from input corrupts datatypescript angular 2 - 从输入创建自己的 blob 损坏数据
【发布时间】：2017-05-02 05:20:12
【问题描述】：

出于学习目的，我想使用 html 输入标签来选择 jpeg 图像，检索文件对象，使用 fileReader 加载它并使用检索到的图像字符串 (base64) 创建一个新的 blob/文件。

该服务可以上传从输入检索到的原始文件就好了。但是，使用我的 newFile 文件会损坏，并且文件大小会变大。

我认为我的 blob 构造函数有问题？

我在打字稿中使用 angular2

<input type="file" (change)="onFileChanged($event)">

onFileChanged(event){
    if (event.target.files && event.target.files[0]) {
        let file = event.target.files[0];
        let newFile;
        let fr = new FileReader();
        fr.onload = (event:any)=>{
            let base64 = event.target.result
            let img = base64.split(',')[1]
            let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
            newFile = this.blobToFile(blob,'test')
        }
        fr.readAsDataURL(file)
        console.log(file)
        console.log(newFile)
        this.service.upload(newFile).subscribe()
    }

}

blobToFile(blob: Blob, fileName: string): File {
        let b: any = blob;
        b.lastModified = moment.now();
        b.lastModifiedDate = new Date();
        b.name = fileName;
        b.webkitRelativePath="";
        return <File>blob
    }

编辑------------ 在发现 fileReader 是异步的后，我对其进行了一些调整，确实问题出在 blob 构造函数上。登录原始文件和新文件的 target.result 显示 base64 已被转换。任何想法为什么？

if (event.target.files && event.target.files[0]) {
            let file = event.target.files[0];
            let base64: string = null;

            if (/^image\//.test(file.type)) {
                let reader = new FileReader();
                reader.onload = (e: any) => {
                    console.log(e.target)
                    base64 = e.target.result

                    let img = base64.split(',')[1];
                    let blob = new Blob([img], { type: 'image/jpeg' })
                    console.log(blob);
                    let fr = new FileReader()
                    fr.onload = (event: any) => {
                        console.log(event.target)
                    }
                    fr.readAsDataURL(blob)
                }
                reader.readAsDataURL(file);
}

【问题讨论】：

event.target.result 是否返回 base64 编码的字符串或二进制数据？
返回类似这样的数据：image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAIBAQEBAQIBAQECAg...
代码看起来正确。您的意思是上传后在服务器上还是在 Angular 应用程序中损坏了？您如何“使用”它，是什么让您相信它已损坏？
好吧，当我上传后下载它时，它说文件已损坏并且无法打开...基本上，如果我只是从输入上传原始文件，一切正常。如果我上传我创建的 Blob/文件，当我下载它时文件已损坏

标签： javascript angular typescript

【解决方案1】：

像这样修改你的函数。因为FileReader 是异步的，要处理结果，您需要在onload 回调中执行此操作，但在这里，您要在onload 之外上传文件，此时为undefined 或任何初始值它包含。

onFileChanged(event){
    if (event.target.files && event.target.files[0]) {
        let file = event.target.files[0];
        let newFile;
        let fr = new FileReader();
        fr.onload = (event:any)=>{
            let base64 = event.target.result
            let img = base64.split(',')[1]
            let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
            newFile = this.blobToFile(blob,'test')
            this.service.upload(newFile).subscribe()
        }
        fr.readAsDataURL(file)
        console.log(file)
        console.log(newFile) // Either prints undefined or whatever initial value it contains

    }

}

【讨论】：

谢谢！但是现在看起来base64字符串已经被转换了......我已经更新了上面的帖子
我完全看不懂你的新代码，为什么你有一个文件阅读器在另一个文件阅读器中读取文件？您只需要读取一次上传的文件

【解决方案2】：

我怀疑你的代码：

onFileChanged(event){
    if (event.target.files && event.target.files[0]) {
        let file = event.target.files[0];
        let newFile;
        let fr = new FileReader();
        fr.onload = (event:any)=>{
            let base64 = event.target.result
            let img = base64.split(',')[1]
            let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
            newFile = this.blobToFile(blob,'test')
        }
        fr.readAsDataURL(file)
        console.log(file)
        console.log(newFile)
        this.service.upload(newFile).subscribe()
    }

}

onFileChanged(event) 和 (event:any)，这两个“事件”表示不同的对象。 onFileChanged 中的 event 是 onFileChanged 的事件对象。 fr.onload 中的 event 是 FileReader.onload 的事件对象。你不觉得这很混乱，可能会导致交叉引用吗？

【讨论】：