Typescript angular 2-根据输入创建自己的Blob会破坏数据

Question

出于学习目的，我想使用html输入标签选择jpeg图像，检索File对象，将其与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);
}

Answer 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

    }

}

Answer 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的事件对象。 您是否不认为这会造成混淆并可能导致交叉引用？