我知道这是一个非常普遍的问题,但我在Angular 2中上传文件失败了。 我试过了
1) http://valor-software.com/ng2-file-upload/
2) http://ng2-uploader.com/home
...但失败了。有人在Angular中上传过文件吗?你用了什么方法?怎么做呢?如果提供了任何示例代码或演示链接,将非常感谢。
我知道这是一个非常普遍的问题,但我在Angular 2中上传文件失败了。 我试过了
1) http://valor-software.com/ng2-file-upload/
2) http://ng2-uploader.com/home
...但失败了。有人在Angular中上传过文件吗?你用了什么方法?怎么做呢?如果提供了任何示例代码或演示链接,将非常感谢。
当前回答
感谢@Eswar。这段代码非常适合我。我想在解决方案中添加一些东西:
我得到错误:java.io.IOException: RESTEASY007550:无法获得多部分的边界
为了解决这个错误,你应该删除“Content-Type”“multipart/form-data”。它解决了我的问题。
其他回答
jspdf和Angular 8
我生成了一个pdf,并希望通过POST请求上传pdf,这就是我所做的(为了清晰起见,我删除了一些代码和服务层)
import * as jsPDF from 'jspdf';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient)
upload() {
const pdf = new jsPDF()
const blob = pdf.output('blob')
const formData = new FormData()
formData.append('file', blob)
this.http.post('http://your-hostname/api/upload', formData).subscribe()
}
感谢@Eswar。这段代码非常适合我。我想在解决方案中添加一些东西:
我得到错误:java.io.IOException: RESTEASY007550:无法获得多部分的边界
为了解决这个错误,你应该删除“Content-Type”“multipart/form-data”。它解决了我的问题。
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"
由于代码示例有点过时,我想我应该分享一个更近期的方法,使用Angular 4.3和新的HttpClient API @angular/common/http
export class FileUpload {
@ViewChild('selectedFile') selectedFileEl;
uploadFile() {
let params = new HttpParams();
let formData = new FormData();
formData.append('upload', this.selectedFileEl.nativeElement.files[0])
const options = {
headers: new HttpHeaders().set('Authorization', this.loopBackAuth.accessTokenId),
params: params,
reportProgress: true,
withCredentials: true,
}
this.http.post('http://localhost:3000/api/FileUploads/fileupload', formData, options)
.subscribe(
data => {
console.log("Subscribe data", data);
},
(err: HttpErrorResponse) => {
console.log(err.message, JSON.parse(err.error).error.message);
}
)
.add(() => this.uploadBtn.nativeElement.disabled = false);//teardown
}
这是一个有用的教程,如何使用ng2-file-upload和不使用ng2-file-upload上传文件。
对我来说很有帮助。
目前,教程包含几个错误:
1-客户端应具有与服务器相同的上传url 在app.component.ts中更改行
const URL = 'http://localhost:8000/api/upload';
to
const URL = 'http://localhost:3000';
2-服务器发送响应为'text/html',所以在app.component.ts更改
.post(URL, formData).map((res:Response) => res.json()).subscribe(
//map the success function and alert the response
(success) => {
alert(success._body);
},
(error) => alert(error))
来
.post(URL, formData)
.subscribe((success) => alert('success'), (error) => alert(error));