Angular2中的文件上传不起作用答案

【问题标题】：File upload in Angular2 not workingAngular2中的文件上传不起作用
【发布时间】：2023-03-27 13:32:01
【问题描述】：

我正在尝试创建一个文件上传功能，用户可以在其中上传 geotiff（大小可能为几 GB）。出于某种原因，我的 Angular 代码无法访问 api 并引发 404，但我可以使用 Postman 上传文件。

角度代码：

 fileChange(event) {
        let token = localStorage.getItem('userToken');
        let fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            let file: File = fileList[0];
            let formData: FormData = new FormData();
            formData.append('files', file, file.name);
            let headers = new Headers();
            headers.append('Content-Type', 'multipart/form-data');
            headers.append("Authorization", token);
            let options = new RequestOptions({ headers: headers });
            this.uploadInProgress = true;
            this._http.post(`${this.uploadApiUrl}`, formData, options)
                .map(res => res.json())
                .catch(error => Observable.throw(error))
                .subscribe(
                data => console.log('success'),
                error => console.log(error),
                () => this.uploadInProgress = false)
        }
    }

API：

// POST: api/GeoTif
[HttpPost]
public async Task<IActionResult> Post(List<IFormFile> files)
        {
            long size = files.Sum(f => f.Length);


            return Ok(new { NoOfUploadedFileCount = files.Count, TotalFileSize =size });
        }

【问题讨论】：

标签： javascript c# angular file-upload .net-core

【解决方案1】：

我了解到 HTTP 服务和 FormData 存在问题。您可以使用 XMLHttpRequest 来完成：

fileChange(event: Event) {
    this.uploadFile(event)
        .subscribe(() => {
            console.log('sent');
        })
}

private uploadFile(event: Event) {
    return Observable.create(observer => {
        const token = localStorage.getItem('userToken');
        const fileList = event.target.files;
        if (fileList.length > 0) {
            const file = fileList[0];
            const formData = new FormData();
            const xhr = new XMLHttpRequest();

            formData.append('files', file, file.name);
            this.uploadInProgress = true;
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        observer.next(JSON.parse(xhr.response));
                        observer.complete();
                    } else {
                        observer.error(xhr.response);
                    }
                    this.uploadInProgress = false;
                }
            }

            xhr.open('POST', this.uploadApiUrl, true);
            xhr.send(formData);
        }
    });
}

【讨论】：

【解决方案2】：

使用http:// 添加您的网址（例如：http://localhost/api/GeoTif/）。并删除以下代码。

headers.append('Content-Type', 'multipart/form-data');
headers.append("Authorization", token);

【讨论】：