Angular 2からDjango Serverにファイルをアップロードするには？ （enctype = "multipart/form-data"）

Question

私はこれに類似したstackoverflowに関する複数の質問を見ましたが、私は以下の問題を解決できませんでした。

私は正常にこのHTMLフォームを使用してファイルをアップロードすることができます。

<form method="POST" action="//127.0.0.1:8000/upload" enctype="multipart/form-data"> 
    <input type="file" name="myfile" required> 
    <button type="submit">Upload</button> 
</form> 

、ここでは、ファイルをサーバー側で処理される方法です。

views.py

def upload_file(request): 
    f = request.FILES['myfile'] 
    with open('media/name.jpg', 'wb+') as destination: 
     for chunk in f.chunks(): 
      destination.write(chunk) 
    return HttpResponse('Done') 

すべてがこの時点まで完全に動作します。ファイルがアップロードされ、ディスク上にname.jpgとして保存されます。今、上記のhtmlを置き換えてURLリダイレクトなしでファイルを投稿したいと思います（角度2のhttpを使用）。

ファイルupload.component.tsは

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

@Component({ 
    selector: 'file-upload', 
    template: '<input type="file" name="myfile">' 
}) 
export class FileUploadComponent { 
    constructor(private http: Http, private el: ElementRef) {} 
upload() { 
    var headers = new Headers(); 
    headers.append('Content-Type','multipart/form-data'); 
    let inputEl = this.el.nativeElement.firstElementChild; 
    if (inputEl.files.length > 0) { 
     let file:FileList = inputEl.files[0]; 
     this.http 
      .post('http://127.0.0.1:8000/upload', file, {headers: headers}) 
      .subscribe(); 
    } 
} 

とこのようにそれを呼び出す：this answer、ここに私の現在の実装で、次の私が言って400不正な要求エラーを取得

<file-upload #myfile (change)="myfile.upload()"></file-upload> 

（リクエストの本文を解析できません）、この行で発生すると思います。

f = request.FILES['myfile'] 

request.FILESにはenctype = "multipart/form-data"が必要なので、私の最初の勘違いは、multipart/form-dataを正しく渡していないことです。

多くの古い議論では、httpでのアップロードファイルが明らかにサポートされていないため、XMLHttpRequestの使用を提案しています。私もそれを試して、同じエラーが発生します。

何か提案がありがとうございます。

Answer 1

私はあなたの問題があると思う：

enctype="multipart/form-data" 

フォームサービスを使用している場合は、ときどきHTMLフォームタグには問題を引き起こします。

<input type="file" name="myfile" required> 
    <button type="submit">Upload</button> 

を、私は間違いなく、まだこれだけは、それが失敗している理由をデバッグするために迅速だろうと思った、フォームのいくつかのタイプを使用します。私は使用してそれをしようとするだろう。私は角度2のフォームライブラリを使用します。

はまた、ここで私が使用してマルチパートアップロードサービスです：

import { Injectable } from '@angular/core'; 


@Injectable() 
export class UploadService { 

    public makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
     return new Promise((resolve, reject) => {    
      let formData: any = new FormData(); 
      let xhr = new XMLHttpRequest(); 
      for(let i =0; i < files.length; i++) { 
       formData.append('file', files[i], files[i].name); 
      } 
      xhr.onreadystatechange =() => { 
       if (xhr.readyState === 4) { 
        if (xhr.status === 200) { 
         resolve(xhr.response);       
        } else { 
         reject(xhr.response); 
        } 
       } 
      }; 
      let bearer = 'Bearer ' + localStorage.getItem('currentUser');    
      xhr.open('POST', url, true); 
      xhr.setRequestHeader('Authorization', bearer); 
      xhr.send(formData); 
     }); 
    } 
} 

あなたはJWTの認証を使用している場合にのみ認証が必要です。そうでない場合は、次の行を削除します。

let bearer = 'Bearer ' + localStorage.getItem('currentUser'); 
xhr.setRequestHeader('Authorization', bearer);