Question

出于学习目的，我想使用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
    }

EDIT ------------ 在发现fileReader是异步的之后，我已经调整了一点，实际上问题在于blob构造函数。 loggin原始文件的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之外，此时此文件为{ {1}}或其包含的任何初始值。

undefined

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），这两个＆＃39;事件＆＃39;意思是不同的对象onFileChanged中的事件是onFileChanged的事件对象。 fr.onload中的事件是FileReader.onload的事件对象。你认为它不会引起混淆并且可能引起交叉引用吗？

typescript angular 2 - 从输入中创建自己的blob会破坏数据

2 个答案: