嘗試使用 Angular HTTP POST form-data

General
1

目前遇到一個問題，主要是檔案上傳的處理，想說用 Angular 的 HTTP POST 進行檔案上傳。

翻了一下 issue 似乎還不支援 form-data 格式的 POST。

不知道有沒有人做過類似的功能可以分享一下作法? :dizzy_face:

2

這是 uploadService, 使用 XHR 來時做上傳功能

import {Injectable} from '@angular/core';
import {BrowserXhr} from '@angular/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class UploadService {
  progress$: Observable<any>;
  progressObserver: any;
  progress: number;
  constructor(private browserXHR: BrowserXhr) {
    this.progress$ = Observable
                         .create(observer => {
                           this.progressObserver = observer;
                         })
                         .share();
  }

  makeFileRequest(url: string, params: string[], files: File[]):
      Observable<any> {
    return Observable.create(observer => {
      const formData: FormData = new FormData();
      const xhr: XMLHttpRequest = this.browserXHR.build();

      for (let i = 0; i < files.length; i++) {
        formData.append('uploads[]', files[i], files[i].name);
      }

      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.response);
            observer.next(xhr.response);
            observer.complete();
          } else {
            observer.error(xhr.response);
          }
        }
      };

      xhr.upload.onprogress = (event) => {
        this.progress = Math.round(event.loaded / event.total * 100);

        this.progressObserver.next(this.progress);
      };

      xhr.open('POST', url, true);
      xhr.send(formData);
    });
  }
}

在 Component 的使用方式如下

<input type="file" (change)="onChange($event)" />

component

onChange(event) {
    console.log('onChange');
    const files = event.srcElement.files;
    console.log(files);
    this.service.makeFileRequest('api/default/upload', [], files)
        .subscribe(() => {
          console.log('sent');
        });
  }

這樣子在後端的api就可以收到前面上船上來的檔案了

1個讚
3

那可以不動到 html view 的情況下做 post form-data 嗎?
而且目前遇到一個問題是，使用 cordova file plugin 的時候，附上去的 file 表示會找不到…Orz

4

後來同事提供的連結關於 cordova 遇到 angular 的 issue
將 cordova.js 的位置改到最後面即可正常運作，不過要透過 cordova 的方法取得 blob 之後，上傳 blob 就能成功了

5

各位好
我想請教一問題
可以上傳圖片至angular這台server某資料夾,而不是送至 後端嗎 ?
謝謝

6

這台 server 不就是指後端嗎?! 是不是有所誤會呢?

7

抱歉 我描述不清楚 我是希望存放在angular框架的某資料夾
但似乎無法達成
需安裝node.js 由後端程式去執行
謝謝 KEVIN 回覆 :slightly_smiling_face: