多部分表单上传图片和Json

Question

在这个问题上有些困惑，需要使用多部分表单同时上传图像和json。不确定如何发送内容类型标头或上传图像。我认为我需要将其转换为blob格式。目前我只是发送从文件输入字段获取的数据。

如果有任何建议，非常感谢。

        $http({
        method: 'POST',
        url: URL,
        headers: { 'Content-Type': false },

        transformRequest: function (data) {

            console.log(data);

            var formData = new FormData();
            formData.append("formatteddata", angular.toJson(data.model));


            formData.append('media', Image)

            return formData;
        },

        data: { model: shoutoutData, image: shoutoutImage}
    }).
    success(function (data, status, headers, config) {

        alert("success!");

    }).
    error(function (data, status, headers, config) {

        alert("failed!");

    });

- user3355603

---

首先，您应该将类型设置为multipart。请参阅以下主题： https://dev59.com/t2Qn5IYBdhLWcg3wRlYM https://dev59.com/dG435IYBdhLWcg3weQBy - Mr Jedi

我正在使用AngularJS，以下是如何设置多部分表单的方法。虽然我能够得到正确的输出，但似乎无法附加图像并为每个部分设置内容类型。 - user3355603

我的理解是你不能这样做。我通常先上传文件，然后使用返回的标识符发送json。请看这个链接：https://dev59.com/C2865IYBdhLWcg3wLrpE#3938628 - Wayne Ellery

Answer 1

Here is the code what i did in my project to upload image and data:- 
HTML PAGE :-
<form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate>
            <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }">
               <label for="name">Name</label>
               <input type="text" class="form-control" id="name"  name="name"
                  placeholder="Name of cuisine" ng-model="dataform.name" required>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : myForm.description.$invalid && myForm.description.$touched }">
               <label for="description">Description</label>
               <input type="text" class="form-control" id="description" name="description" 
                  placeholder="Description for cuisine" ng-model="dataform.description" required>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : myForm.category.$invalid && myForm.category.$touched }">
               <label for="description">Category</label>
                <select class="form-control" ng-model="dataform.category" id="category" name="category" required>
                   <option>Veg</option>
                   <option>Non-veg</option>
                 </select>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : myForm.subcategory.$invalid && myForm.subcategory.$touched }">
               <label for="description">Sub-Category</label>
                <select class="form-control" ng-model="dataform.subcategory" id="subcategory" name="subcategory" required>
                   <option>Main Course</option>
                   <option>Staters</option>
                 </select>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : myForm.price.$invalid && myForm.price.$touched }">
               <label for="description">Price</label>
               <span class="fa fa-dollar"></span>
               <input type="number" class="form-control" id="price" name="price" 
                  placeholder="Price" ng-model="dataform.price" required>
            </div>  
            <div class="form-group">
               <label for="description">Image</label> 
               <input type="file"  file-input="files" name="file"/>
            </div>  
            <button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid"> Submit</button>
        </form>



Controller:-
$scope.submitCuisine=function(isvalid){
    if(isvalid){
        var fd=new FormData();
        angular.forEach($scope.files,function(file){
            fd.append('file',file);
        });

        fd.append('formdata',JSON.stringify($scope.dataform));

        $http.post('admin/managecuisineAdd',fd,{
            transformRequest:angular.identity,
            headers:{'Content-type':undefined}
        }).success(function(data){
            $scope.status=data;
            $scope.itemlist.push(data)
            $scope.message="New Dish Added Successfully"
        });
    }   
}

Directive :-
myApp.directive("fileInput",['$parse',function($parse){
    return{
        restrict:'A',
        link:function(scope,ele,attrs){
            ele.bind('change',function(){
                $parse(attrs.fileInput).
                assign(scope,ele[0].files)
                scope.$apply()
            });
        }
    }
}]);

Plunker：- http://plnkr.co/edit/yPNA0ij3Dn37tsI9w7Z2?p=preview 在Firebug中检查帖子头，您会发现它以加密形式显示图像并在其末尾显示数据。

- squiroid

---

谢谢，我稍微调整了您的代码，但是它确实给了我正确的方向。感谢您的帮助。 - user3355603

Answer 2

使用formData作为容器，就像@squiroid所说的那样。

在HTML代码中

<form ng-submit="vm.uploadFile()">
      <input type="file" id="filePhoto" name="file">
      <button type="submit">Save</button>
</form>
{{vm.previewImage()}}

在我的控制器中

vm.previewImage = previewImage;
function previewImage(){
        console.info("vm.file "+vm.file);
        var imageLoader = document.getElementById('filePhoto');
        console.info(imageLoader);
        imageLoader.addEventListener('change', handleImages, false);

        function handleImages(e) {
            console.info("entra handleImage");
            vm.file = e.target.files[0];
            console.info("archivo ");
            console.info(vm.file);
        }
}

vm.uploadFile = uploadFile;
function uploadFile() {
    return dataFactory.uploadFile(
        vm.file)
        .then(function successCallback(response) {
            console.info('uploadFile success');
            console.info(response);
        }, function errorCallback(response) {
            console.info('updauploadFileteUser fail');
            console.info(response);
        });
}

在DataFactory中

function updateUser(token,file,username,email,lenguaje,colapsarMenu){
    var formData=new FormData();
    formData.append('file',file);
    //append more params if you want

    return $http
        .post('/uploadFile',
        formData,{
            transformRequest:angular.identity,
            headers: {
                //Optional token bearer 'Authorization': 'Bearer '+token,
                'Content-type':undefined
            }
        });
}

- Samuel Seda