个人中心
gpt4 book ai didi

angularjs - 请求被拒绝，因为在 angularjs 和 spring mvc 中没有找到多部分边界

转载 作者：行者123 更新时间：2023-12-04 19:58:27 26 4
gpt4 key购买 nike

我试图使用angular js和spring mvc上传multiple =“true”的多个输入类型文件，但我从服务器收到异常是“请求被拒绝，因为没有找到多部分边界”

在这里，我将把我的代码放在下面

我的jsp是

 <html ng-app="myApp">
 <body>
       <div ng-controller="controller">
            <input type="submit" name="submit" value="add"  ng-click="add();" />
          <form name="form" id="form"   ng-submit="submitRecord(blog)" enctype="multipart/form-data" >
                   <div id="outerdiv" name="outerdiv">
                   </div>
          </form>
       </div>
 </body>
  </html>

在这里，我在单击“添加”后从 Angular Controller 生成输入元素，并在“”中生成输入控件。

我的 Angular Controller 是 
'use strict';

var App = angular.module('TechnoBlogs', ['ngRoute','ui.router']);
var $injector = angular.injector(['ng']);
App.config(['$httpProvider', function ($httpProvider) {    

    /*$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';*/
}],['$routeProvider',function($routeProvider){
    $routeProvider.
    when('/create', {
       templateUrl: '/',
       controller: 'controller'
});

 }]);
var currentg1=0;

var controller = function($scope,$http,fileService){

$scope.blog = [];
/*var currentg1=0;*/
$scope.blog.desc=[];
$scope.blog.desccode=[];
$scope.blog.descimg=[];

$scope.add=function(){



var $div = angular.element("<br><div><label id='desc["+currentg1+"]'   for='desc["+currentg1+"]'>Description"+currentg1+"<span style='color: red;''>*</span></label><textarea rows='3' cols='6' id='desc["+currentg1+"]' name='desc["+currentg1+"]' ng-model='blog.desc["+currentg1+"]' required='required'></textarea> </div><br><div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]'  multiple/></div>");
var e=document.getElementById("outerdiv");


angular.element(e).append($div).injector().invoke(function($compile) {
      var scope = angular.element($div).scope();
      $compile($div)(scope);        
    });

    currentg1++;
};

$scope.submitRecord=function(blog){


var fd = new FormData();
var files=[];
for(var i=0;i<currentg1;i++)
{

    files[i] = fileService.getFile("descimg["+i+"]");
    console.log("files["+i+"] ---> "+files[i]);
}


fd.append("files",files);

alert(fd);
console.log("--->>> "+files);


$http.post("saveblog",fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
}).success(function(){
    alert("success");

})

};

};


App.service('fileService', function () {
 var file = {};
 var fileService = {};

 fileService.getFile = function (name) {
     return file[name];
};

 fileService.setFile = function (newFile, index, name) {
    if (index === 0 && file[name] === undefined)
    file[name] = [];
   file[name][index] = newFile;

 };

 return fileService;
})

 App.directive('myFileUpload', function (fileService) {
 return function (scope, element, attrs) {
     element.bind('change', function () {
      var index;

       var index_file = 0;
       for (index = 0; index < element[0].files.length; index++) {
       fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
        index_file++;
    }
    index_file = 0;

  });
  }
 });

我的 Spring Controller 是 
@RequestMapping(value="/saveblog", method=RequestMethod.POST, headers = "'Content-Type': 'multipart/form-data'")
public void saveblog(MultipartHttpServletRequest request, HttpServletResponse response)
{

    System.out.println("in multipart ");
    Iterator<String> itr=request.getFileNames();

    MultipartFile file=request.getFile(itr.next());

    String fileName=file.getOriginalFilename();
    System.out.println(fileName);

}

我还为 multipart 创建了一个 bean 
  <bean id="multipartResolver"                class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="2097152" />
</bean>

在那之后仍然有异常

我的响应头是 
HTTP/1.1 404 Not Found
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Language: en
Content-Length: 949

我的请求 header 是 
POST /technoblogs/blog/saveblog HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 209
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7uIEu9ax8IY8nCde
Referer: http://localhost:8080/technoblogs/blog/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: JSESSIONID=61816E4AB7F6905F688755CF22BC16FF

最佳答案

也许这个 link会帮助你。您缺少的是内容标题。

从链接的答案:

Angular will POST as JSON even if you set the Content-Type to the correct value multipart/form-data. So we must transform our request manually to the correct data. … [using] a transformRequest function that does nothing as returning your original FormData … like this:


$http({
    method: 'POST',
    url: 'newDocument',
    headers: {'Content-Type': 'multipart/form-data'},
    data: formData,
    transformRequest: function(data, headersGetterFunction) {
        return data; // do nothing! FormData is very good!
    }
})

编辑:您能向我们展示您的 HTTP 响应和/或请求吗？

关于angularjs - 请求被拒绝，因为在 angularjs 和 spring mvc 中没有找到多部分边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31089824/

26 4 0
文章推荐： performance - 通过重构 if 语句/do 循环来避免重复代码
文章推荐： r - 如何将 span bin 信息转换为单独的 bins？
文章推荐： qt - ActiveQt 包含什么模块？
文章推荐： solaris - OpenSolaris 中的 wheel 组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com