2016-08-12 3 views
0

DreamFactoryでマルチパートを使用して画像をアップロードするには?DreamFactoryでファイルをアップロードするには?

私はangualr2を使用していますが、xhrとhttp.postを試しました。両方とも動作していません。私は201のステータスコードと空のリソースを返します。ドキュメントだけ

POST http://{url}/api/v2/{storage_service_name} 

Request header: 
... 
Content-Type: multipart/form-data; 
... 

Request payload: 
-- <file content> -- 

が言う明確な説明

答えて

1

あなたは、ファイルのHTML入力名は「ファイル」であることを確認する必要があります - ファイルフィールドの他の名前は、コンテンツをアップロードしないでしょう。また、ファイルを保存するディレクトリまたはパスにそれを投稿する必要があります。ディレクトリが既に存在すると仮定して、ファイルを期待通りにアップロードする必要があります。がんばろう!

2

これを理解しようとしていて、ドキュメントは本当にあまり役に立ちませんでした。これは私が最終的に使用したものです

以下のようにコンポーネントを作成しました。パス入力は、ファイルサービスですでに作成されたフォルダを表します。存在しない場合でもコードをリファクタリングしてフォルダを作成する必要がありますが、これまでのところ動作します。

import { Component, ElementRef, Input, ViewChild } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 

import * as constants from '../shared/config'; 
@Component({ 
    selector: 'file-upload', 
    template: '<input type="file" #fileInput>' 
}) 
export class FileUploadComponent { 
    @Input() multiple: boolean = false; 
    @Input() path: string = ''; 
    @ViewChild('fileInput') inputEl: ElementRef; 
    baseResourceUrl: string = constants.API_BASE_URL + '/api/v2/files/'; 

    constructor(private http: Http) {} 
    upload() { 
     console.log("changed"); 
     let inputEl: HTMLInputElement = this.inputEl.nativeElement; 
     let fileCount: number = inputEl.files.length; 
     let fileName: string = ''; 
     console.log(inputEl.files); 
     let formData = new FormData(); 
     if (fileCount > 0) { // a file was selected 
      formData.append('files[]', inputEl.files.item(0), inputEl.files.item(0).name); 
      formData.append('pmCase', '100'); 
      fileName = inputEl.files.item(0).name; 
      let myHeader = new Headers(); 
      let token = localStorage.getItem('session_token'); 
      myHeader.append('Content-Type', 'multipart/form-data'); 
      myHeader.append('X-Dreamfactory-API-Key', 'xxxxxxxxxxx'); 
      myHeader.append('X-Dreamfactory-Session-Token', token); 
      this.http 
       .post(`${this.baseResourceUrl + this.path + fileName}`, formData, { headers: myHeader }) 
       .map((resp) => resp.json()) 
       .subscribe((uploadResp) => { 
        console.log(uploadResp); 
       }, (error) => console.error(error)); 
     } 
    } 
} 
関連する問題