1. ホーム
  2. angular

[解決済み】Angularでファイルアップロード?

2022-04-13 06:53:03

質問

これは非常に一般的な質問ですが、私はAngular 2でファイルをアップロードすることに失敗しています。 私は試してみました

1) http://valor-software.com/ng2-file-upload/

2) http://ng2-uploader.com/home

...が、失敗しました。Angularでファイルをアップロードした方はいらっしゃいますか?どのような方法を使用しましたか?どのように行うのですか?サンプルコードやデモのリンクがあれば、本当に感謝します。

解決方法は?

Angular 2はファイルのアップロードに優れたサポートを提供します。サードパーティのライブラリは必要ありません。

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

angular/core": "~2.0.0" と @angular/http: "~2.0.0" を使用します。