如何在AngularJS中为表单数据的每个部分发送正确的内容类型(如果使用文件上传的FormData和其他表单字段)? [英] How to send correct content type for each part of form data (in case of FormData with file upload and other form fields) in AngularJS?

问题描述

如已接受的解决方案所示，此处；我能够发送包含文件和其他表单字段的多部分表单数据.但是，对于其他表单字段，请求中缺少内容类型，多部分表单数据如下所示:

As shown in an accepted solution here; I am able to send multipart formdata with file and other form fields. However, for other form fields, the content type is missing in the request,the multipart form data looks something like this:

------WebKitFormBoundaryx2K3e9RYOyHECg8E
Content-Disposition: form-data; name="containerId"

12345
------WebKitFormBoundaryx2K3e9RYOyHECg8E
Content-Disposition: form-data; name="fileName"

てすと.qml
------WebKitFormBoundaryx2K3e9RYOyHECg8E
Content-Disposition: form-data; name="filePathInput"; filename="てすと.qml"
Content-Type: application/octet-stream

...... all file file contents

如您所见，内容类型仅传递给文件内容，而不传递给fileName和containerId表单数据

对于其他表单字段，请求中缺少内容类型，因此，如果我将多字节字符作为表单数据发送，则无法在服务器中读取该内容(因为服务器尝试以ISO编码读取它，并且输入出现乱码).

For other form fields, the content type is missing in the request, because of which, if I send a multibyte character as form data, I am unable to read that in server (because server tries to read it in ISO encoding and input becomes garbled).

我应该怎么做才能使用AngularJS在多部分表单数据中发送每个部分的内容类型?

What should I do to send content type with each part in multipart form data using AngularJS?

例如，当前代码如下:

angular.directive('fileUpload', function($parse,$http) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                // some code....
                var onSubmit;
                if (window.FormData) {
                    onSubmit = function(e) {
                        var formData = new FormData(e.target);
                        if (attrs.formData) {
                            angular.forEach($parse(attrs.formData)(scope), function(value, key) {
                                formData.append(key, value);
                            });
                        }
                        $http.post('some_url',formData,headers: {headers:
                            {'Content-Type': undefined},
                            transformRequest: angular.identity
                        }).success(function(response) {
                            // do some stuff
                        });
// some more code....
}}}}});

推荐答案

我找到了答案...经过深思熟虑，并投入了大量与Anglarjs中文件上传相关的工作，答案是只是将所有表单数据包装为blob:

I found the answer... with lots of thinking over it, and sinking my head on lots of such stuff related to file upload in anglarjs, the answer is just to wrap all the form data in blob as :

替换-> formData.append(key，value);与-> formData.append(key，new Blob([value]));

replace --> formData.append(key, value); with --> formData.append(key, new Blob([value]));

现在所有表单数据都以内容类型作为blob发送，服务器会自动在blob中检测到正确的数据类型.

and all the form data are now sent with content type as blob, the server automatically detects the correct data type inside the blob.

这篇关于如何在AngularJS中为表单数据的每个部分发送正确的内容类型(如果使用文件上传的FormData和其他表单字段)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！