Question

我是django和python的集成环境，当我尝试将文件上传到Django api休息时，我得到了错误：415不支持的媒体类型。

以下代码：

下面的表格：

捕捉事件的功能：

fileChangeEvent(fileInput: any){
    this.filesToUpload = <Array<File>>fileInput.target.files;
    this.isLoading = true;
    this.uploadService.UploadFile(this._UploadUrl,[], this.filesToUpload).subscribe( res => {
        this.isLoading = false;

        if (res.status === 200) {;
            console.log("We have been posted file sucessfully");
            console.log("File: " + res.filename);
        } else {
            this.uploadMessage = true;
            console.log(res.status);
            this.myMessage=res.status;
            console.log("File: " + res.filename);
        }
    },(err) => {
        this.isLoading = false;
        this.uploadMessage = true;
        switch (err.status){
            case 404:
           this.myMessage="Backend component not found";
           this.myMessage+=err.message;
            console.log(err);
            break;
            case 403:
            this.myMessage="No access allowed by server";
            this.myMessage+=err.message;
            console.log(err);
            break;
            case 401:
            this.myMessage="No autorized";
            this.myMessage+=err.message;
            console.log(err);
            break;
            case 405:
            this.myMessage="Method don't allowed";
            this.myMessage+=err.message;
            console.log(err);
            break;
            case 408:
            this.myMessage="Request timeout";
            this.myMessage+=err.message;
            console.log(err);
            break;
            case 415:
            this.myMessage="Unsupported media type";
            this.myMessage+=err.message;
            console.log(err);
            break;
            case 500:
            this.myMessage="Internal server error";
            this.myMessage+=err.message;
            console.log(err);
            break;
            default:
            console.log(err);
            this.myMessage=err.message;
        }
    });

}

上传功能：

public UploadFile(URL:string, params: string[], req: any): Observable<any> {
    let body = JSON.stringify(req);
    let headers = new Headers();
    headers.append('Content-Type', 'text/html; charset=UTF-8');
    headers.append('Accept', 'application/json, text/plain, text/html,  */*');
    console.log("body:");
    console.log(body);
    headers.append('Authorization', 'JWT ' + localStorage.getItem('token'));
    let options = new RequestOptions({ headers: headers });
    console.log("options");
    console.log(options);
    return this.http.post(URL, body, options);

}

我尝试了许多不同的标题，但没有人帮助，我想知道Angular2发布候选人1可能有处理上传文件的问题，有人可以向我确认吗？

Answer 1

角度2中的POST请求仅支持String类型。因此，要发送多部分数据，您必须使用XHR。

<input id="upfile" type="file" (change)=MyUploadFile($event.target.files) value="upload"/>

   public MyUploadFile(files: any) {
           console.log("Entered into uploadFile");
          for (let file of files) {
            console.log(file);
        }
        return new Promise((resolve,reject) =>{
            let formData: any = new FormData()
            let xhr = new XMLHttpRequest()
            for (let file of files) {
                formData.append("file", file)
            }

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        //resolve(JSON.parse(xhr.response));
                        resolve(xhr.response);
                        console.log(xhr.response);
                    } else {
                        reject(xhr.response);
                        console.log(xhr.response);
                    }
                }
            }
            xhr.open("POST", this._UploadUrl, true)
            xhr.setRequestHeader('Authorization', 'JWT ' + localStorage.getItem('token'));
            xhr.send(formData)
        })
    }

Angular 2.0 Release candidate 1上传问题

1 个答案: