Angular：上传 Excel/Pdf 文件并在发布之前将其转换为 BLOB

Question

我目前在前端使用 Angular，需要使用表单上传文件并将其转换为 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，但显示错误，因为我实际上是从本地系统上传文件时尝试发出获取请求。如果任何人都可以分享相关信息或博客或任何有助于实现这一目标的内容，那就太好了。

Answer 1

Blob 几乎是一个少了两个属性的文件。在您的情况下，您想要实现的目标可以通过我在下面提到的这种方法来实现：

您可以将文件转换为 Base 64，然后转换为 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')
}

干杯! 快乐编码....