如何将文件从Angular 2上传到Django服务器？ （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重定向（使用angular 2 http）。 在此答案之后 ，这是我当前的实现：

file-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();
    }
}

并这样称呼它：

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

我收到一个400错误的请求错误消息（无法解析请求正文），并且我认为它发生在这一行：

f = request.FILES['myfile']

由于request.FILES需要enctype =“ multipart / form-data”，所以我的第一个直觉是我没有正确传递multipart / form-data。

许多较早的讨论都建议使用XMLHttpRequest，因为当时显然不支持使用http上传文件。 我也尝试过，但仍然遇到相同的错误。

任何建议，将不胜感激。

Answer 1

我认为您的问题是：

enctype="multipart/form-data"

如果您使用的是表单服务，则有时HTML表单标签会引起问题。 我会尝试使用：

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

我肯定仍会使用某种形式的表单，只是认为这样做可以快速调试为什么失败。 我将使用angular 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身份验证时才需要auth。 如果不是，则要删除以下行：

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