我知道这是一个非常普遍的问题,但我在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中上传过文件吗?你用了什么方法?怎么做呢?如果提供了任何示例代码或演示链接,将非常感谢。
当前回答
这是一个有用的教程,如何使用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));
其他回答
这是一个有用的教程,如何使用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));
我已经上传文件使用引用。以这种方式上传文件不需要包。
//要写入.ts文件的代码
@ViewChild("fileInput") fileInput;
addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
let fileToUpload = fi.files[0];
this.admin.addQuestionApi(fileToUpload)
.subscribe(
success => {
this.loading = false;
this.flashMessagesService.show('Uploaded successfully', {
classes: ['alert', 'alert-success'],
timeout: 1000,
});
},
error => {
this.loading = false;
if(error.statusCode==401) this.router.navigate(['']);
else
this.flashMessagesService.show(error.message, {
classes: ['alert', 'alert-danger'],
timeout: 1000,
});
});
}
}
//服务中要编写的代码。ts文件
addQuestionApi(fileToUpload: any){
var headers = this.getHeadersForMultipart();
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post(this.baseUrl+'addQuestions', input, {headers:headers})
.map(response => response.json())
.catch(this.errorHandler);
}
//用HTML编写的代码
<input type="file" #fileInput>
尽量不要设置options参数
这个http post(美元(this。apiEndPoint), formData)
并且确保你没有在你的Http工厂中设置globalHeaders。
在Angular 2+中,让Content-Type为空是非常重要的。如果您将“内容类型”设置为“multipart/form-data”,则上传将无法工作!
upload.component.html
<input type="file" (change)="fileChange($event)" name="file" />
upload.component.ts
export class UploadComponent implements OnInit {
constructor(public http: Http) {}
fileChange(event): void {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file = fileList[0];
const formData = new FormData();
formData.append('file', file, file.name);
const headers = new Headers();
// It is very important to leave the Content-Type empty
// do not use headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
const options = new RequestOptions({headers: headers});
this.http.post('https://api.mysite.com/uploadfile', formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
);
}
}
}
感谢@Eswar。这段代码非常适合我。我想在解决方案中添加一些东西:
我得到错误:java.io.IOException: RESTEASY007550:无法获得多部分的边界
为了解决这个错误,你应该删除“Content-Type”“multipart/form-data”。它解决了我的问题。