Angularjs 在请求负载中上载文件名为的多部分表单数据

我仍然对上传文件的不同方法感到困惑。后端服务器不在我的控制之下，但我可以使用Swagger page或Postman上传文件。这意味着服务器运行正常。但是当我使用AngularJS进行上传时，它不起作用

以下是使用Postman进行测试的方法。我只是在使用

表单数据

：

请注意，请求头的内容类型为多部分/表单数据。但是请求有效负载具有

文件名

，内容类型为image/png

这是我的密码：

$http({
  method: 'POST',
  url: ApiUrlFull + 'Job/Item?smartTermId=0&name=aaa1&quantity=1&ApiKey=ABC',
  headers: { 'Content-Type': undefined },
  transformRequest: function(data) { 
    var fd = new FormData();
    fd.append('file', params.imageData);
    return fd; 
  }
})

params

只是

imageData

中具有文件url的对象

我的代码还发送类似的URL参数（因此我们可以忽略导致问题的URL参数）。但是请求有效负载是base64，它看起来不同，因为它缺少

filename

字段

我对后端没有控制权，它是用.NET编写的

所以我想我的问题是：使用Angular（无论是$http还是$resource），我如何修改请求，以便像Postman那样发送正确的请求负载？我不知道如何对其进行反向工程

---

我已经试过了，它实际上是在发布之前先请求选项的（假设CORS问题）。但是服务器给出了405个选项错误。

您可以使用以下内容：

<input type="file" name="file" onchange="uploadFile(this.files)"/>

我的需要是一个简单的过程

• 表单中有一张默认图片
• 单击图片将打开文件选择窗口
• 当用户选择一个文件时，它会立即上载到服务器
• 一旦收到文件有效的响应，就向用户显示图片而不是默认图片，并在其旁边添加删除按钮
• 如果用户单击现有图片，文件选择窗口将重新打开

我试图在github上使用一些代码片段，但这些代码片段并没有解决问题，而是以正确的方式引导我，最终我所做的是：

指示

Html

希望能有帮助

---

另外，本例中删除了大量代码，如果您需要澄清，只需注释即可。

您需要发送一个实际的

文件
（或一个
Blob
）对象，以在第一次请求中获得效果，
params.imageData
是一个字符串。
params.imageData
只是
文件：//
来自
输入类型=文件的URL。或者你指的是我没有想到的其他东西吗？根据你发布的
params.imageData
是一个base64编码的png，它是一个字符串。要获取FormData以按所需方式发布数据，它必须是文件对象或Blob对象。I
fd.append（'file'，来自图像数据的blob_）搜索将数据url转换为blob的问题。您是如何解决的？面对同样的问题。请帮忙！
$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);
    var uploadUrl = ApiUrlFull + 'Job/Item?smartTermId=0&name=aaa1&quantity=1&ApiKey=ABC';
    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

angular.module("App").directive('fileModel', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.files = {};
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            // I wanted it to upload on select of file, and display to the user.
            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });

                // The function in the controller that uploads the file.
                scope.uploadFile();
            });
        }
    };
});

<div class="form-group form-md-line-input">
    <!-- A remove button after file has been selected -->
    <span class="icon-close pull-right"
          ng-if="settings.profile_picture"
          ng-click="settings.profile_picture = null"></span>
    <!-- Show the picture on the scope or a default picture -->
    <label for="file-pic">
        <img ng-src="{{ settings.profile_picture || DefaultPic }}"
             class="clickable" width="100%">
    </label>

    <!-- The actual form field for the file -->
    <input id="file-pic" type="file" file-model="files.pic" style="display: none;" />
</div>

$scope.DefaultPic = '/default.png';

$scope.uploadFile = function (event) {
        var filename = 'myPic';
        var file = $scope.files.pic;
        var uploadUrl = "/fileUpload";

        file('upfile.php', file, filename).then(function (newfile) { 
            $scope.settings.profile_picture = newfile.Results;
            $scope.files = {};
        });
};

function file(q, file, fileName) {
    var fd = new FormData();
    fd.append('fileToUpload', file);
    fd.append('fn', fileName);
    fd.append('submit', 'ok');

    return $http.post(serviceBase + q, fd, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    }).then(function (results) {
        return results.data;
    });
}