javascript - 通过 Angular http 请求发布文件

标签 javascript angularjs http

我正在使用 angularjs,我正在尝试将图片连同请求正文中的其他数据一起上传到 django 后端服务器。

我不断从服务器收到错误消息,告诉我我发送的图片不是文件。 (假设后端没有问题)

我试过使用 ng-file-upload ( https://github.com/danialfarid/ng-file-upload ) 来获取文件,然后通过 angular 本身发送它。 (注意:我需要连同图片一起发送其他数据)所以我想将文件存储在一个变量中并将其传递到请求正文中,如下所示:

<form name="form">
<div class="button" ngf-select ng-model="file" name="file" ngf-resize="{width: 100, height: 100}">Select</div>
<button type="submit" ng-click="submit()">submit</button>
</form>

由于文件存储在 $scope.file 中,我尝试在 http 请求中使用它:

$http({
          'method': "PUT",
          'url': "api/candidate-profiles/" + id,
          'data':data
})

数据在哪里:

{"id": $scope.id,
"name": $scope.name,
"avatar":$scope.file}

我从后端收到验证错误,指出头像不是文件。有帮助吗?

最佳答案

HTML

<div ng-controller="formCtrl">
            <form  name="userForm"  class="well form-search"   >

                <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
                <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
                <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
                <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid">Submit </button>

            </form>
            <pre ng-model="result">
                {{result}}
            </pre>
        </div>

js文件

var app = angular.module('formExample', []);

app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
        $scope.url = 'submit.php';

        $scope.formsubmit = function(isValid) {


            if (isValid) {


                $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; // Show result from server in our <pre></pre> element
                        })
            }else{

                  alert('Form is not valid');
            }


        } }]);

Code Download

demo click

关于javascript - 通过 Angular http 请求发布文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39100860/

相关文章:

javascript - 当用户试图离开页面时,如何执行 javascript 函数?

javascript - Redux 存储和 PouchDB 未与 redux-pouchdb 同步

javascript - NodeJS 的图像下载问题

java - 未处理来自 AJAX 调用的 GET 或 POST 请求

javascript - 如何在 malhar Angular 小部件上保存样式更改?

javascript - 处理多个http调用和多个响应

javascript - 为 javascript 数组元素赋值在循环时不起作用(经典的 .asp),但在不循环时却起作用,为什么?

javascript - 为什么 CKEditor 没有出现?

javascript - 使用不记名 token 在 JavaScript 中加载图像

angularjs指令: how to encapsulate css?