在Angular2中无法上传文件

Question

我正在尝试创建文件上传功能，用户可以在其中上传geotiff（大小可能为数GB）。 由于某种原因，我的角度代码无法击中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 });
        }

Answer 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);
        }
    });
}

Answer 2

添加带有http:// URL（例如： http://localhost/api/GeoTif/ ）。 并删除以下代码。

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