我正在尝试使用angularjs 1.6.5将文件上传到Django服务器。我无法使用$ http.patch方法上传文件

时间:2018-04-24 12:06:42

标签: angularjs django

使用Angularjs 1.6.5我正在尝试将文件上传到Django服务器。当我尝试上传文件时,我不确定应该使用$ http.patch方法传递什么类型的“Content-Type”标头。以下是我的Angular应用程序配置: -

var app = angular.module("edit_modules", []);

app.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
});

这是我的补丁方法: -

$http.patch(url, data, {
    headers: {'Content-Type': 'application/json; charset=utf-8' }
}).then(successCallback, errorCallback);
function successCallback(response){
    console.log("Success");
    console.log(response);
};
function errorCallback(error){
    alert("Error Uploading!");
    console.log(error);
};

当我通过标题{'Content-Type': 'application/json; charset=utf-8' }时,我收到以下错误: -

"The submitted data was not a file. Check the encoding type on the form."
Status :- 400

由于其内容类型是文件,我使用了以下标题{'Content-Type': 'multipart/form-data; charset=utf-8'}。但后来我收到了这个错误: -

Multipart form parse error - Invalid boundary in multipart: None
Status :- 400

正如链接here中所建议的,我也尝试了以下标题{'Content-Type': undefined}但是这也没有解决我的问题,我收到了以下错误: -

Unsupported media type "text/plain;charset=UTF-8" in request. 
Status :- 415

然而,当我尝试使用简单的文本字段时,PATCH方法使用提供的标头{'Content-Type':'application / json; charset = utf-8'}。我不确定问题出在哪里。我甚至试图在控制台上查看要修补的数据

data = {
    "video": element.files[0]
};
console.log(data);

这是我在控制台上得到的: -

{video: File(99861)}video: File(99861) {name: "Capture2.PNG", lastModified: 1517491665223, lastModifiedDate: Thu Feb 01 2018 18:57:45 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 99861, …}

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

参考答案here我发现您需要附加要使用FormData发送的文件对象。您还需要在配置transformRequest: angular.identity,中添加其他标头。这是成功的PATCH方法,对我有用。

        var fd = new FormData();
        fd.append('video', element.files[0]);
        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

在第二行'video'是REST API端点的变量,我的文件将存储在该变量中。为了避免错误

Multipart form parse error - Invalid boundary in multipart: None

我离开了headers: {'Content-Type': undefined}