[angular] 文件上傳角度?


Answers

感謝@Eswar。 這段代碼完全適合我。 我想向解決方案添加某些內容:

我收到錯誤: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart

為了解決這個錯誤,你應該刪除“Content-Type”“multipart / form-data”。 它解決了我的問題。

Question

我知道這是一個非常普遍的問題,但我無法上傳Angular 2中的文件。我試過了

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

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

...但失敗了。 有沒有人上傳過Angular的文件? 你用什麼方法? 如何做? 如果提供任何示例代碼或演示鏈接,它將非常感激。




由於代碼示例有點過時,我想我會分享一個更近的方法,使用Angular 4.3和新的(er)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和WITHOUT ng2-file-upload來上傳文件。

對我來說它有很大的幫助。

目前,教程包含一些錯誤:

1-客戶端應該具有與服務器相同的上傳URL,因此在app.component.ts更改行

const URL = 'http://localhost:8000/api/upload';

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

}

//代碼被寫入service.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>



Related