代码之家  ›  专栏  ›  技术社区  ›  Immad Hamid

角度:上传excel/pdf文件并在发布前将其转换为blob

  •  3
  • Immad Hamid  · 技术社区  · 6 年前

    我目前在前端使用angular,在将文件发送到服务器之前,我需要使用form上传一个文件并将其转换为blob。

    我实际上想做的是:我想从本地系统上传一个文件,然后在进行一些验证之后将其转换为blob。

    这是我的HTML

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

    这是我的方法

    changeFile(event) {
       console.log(event);
       var oReq = new XMLHttpRequest();
       oReq.open("GET", `/${event.target.files[0].name}`, true);
       oReq.responseType = "blob";
    
       oReq.onload = function(oEvent) {
         var blob = oReq.response;
         console.log(blob)
       };
    
       oReq.send();
    }
    

    它确实将其转换为blob,但在我尝试从本地系统上载文件时发出get请求时显示一个错误。如果有人能分享相关的信息、博客或者其他有帮助的东西来达到这个目的,那就太好了。

    1 回复  |  直到 6 年前
        1
  •  2
  •   syed haider    6 年前

    blob几乎是一个属性少了两个的文件。在您的情况下,您希望实现的目标可以通过以下方法实现:

    您可以将文件转换为base64,然后转换为blob,为了显示它,您可以将其转换回base64,如下所示:

    HTML:

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

    TS文件:

    changeFile(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }
    
    uploadFile(event) {
        if (event.target.value) {
            const file = event.target.files[0];
            const type = file.type;
            this.changeFile(file).then((base64: string): any => {
                console.log(base64);
                this.fileBlob = this.b64Blob([base64], type);
                console.log(this.fileBlob)
            });
        } else alert('Nothing')
    }
    

    干杯!快乐编码……