Я пытаюсь загрузить файл на сервер Django, используя angularjs 1.6.5. Я не могу загрузить файл, используя метод $ http.patch

Question

Использование Angularjs 1.6.5 Я пытаюсь загрузить файл на сервер Django. Когда я пытаюсь загрузить файл, я не уверен, какой тип заголовка 'Content-Type' должен быть передан методом $ http.patch. Вот следующая моя конфигурация приложений 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

Как указано в ссылке здесь Я также попробовал следующий заголовок {'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, …}

любая помощь очень ценится.

Answer 1

Обращаясь к ответу здесь Я обнаружил, что вам необходимо прикрепить объект File для отправки с использованием 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' - это переменная конечной точки API REST, в которой будет храниться мой файл. Во избежание ошибки

Multipart form parse error - Invalid boundary in multipart: None

Я оставил headers: {'Content-Type': undefined}.