angularJs upload file error: The current request is not a multipart request

Question

I'm try to upload file with angularjs, but there has a problem is "The current request is not a multipart request" and I almost try every solution from google but not solve my problem, I hope someone can answer my question, THANKS.

this is my springMVC config

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"></property>
    <property name="maxUploadSize" value="5242880"></property>
</bean>

this is html

<input type="file" id="file"/>
<button class="btn btn-primary" type="button" ng-click="uploadFile()">上传</button>

this is angular controller

$scope.uploadFile = function () {
    uploadService.uploadFile().success(function (response) {
        if(response.success){
            $scope.image_entity.url = response.message;
        }else{
            alert(response.message);
        }
    })
}

this is angular service

this.uploadFile = function () {
    var formData = new FormData();
    formData.append("file", file.files[0]); //文件上传框的name
    return $http({
        url: "/upload.do",
        method: "post",
        data: formData,
        headers: {"Content-Type": undefined},
        transformRequest: angular.identity
    })
}

this is uploadController

@RequestMapping("/upload")
public ReturnResult upload(MultipartFile file){
    String fullName = file.getOriginalFilename(); 
    String extName = fullName.substring(fullName.lastIndexOf(".") + 1); 
    try {
        FastDFSClient client = new FastDFSClient("classpath:config/fdfs_client.conf");
        String fileId = client.uploadFile(file.getBytes(), extName);
        String url = file_server_url + fileId;  
        return new ReturnResult(true, url);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

I see the google browser send

Request Method: POST

Request Headers

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryrzP8MUha8lcbDzdn

Form Data

------WebKitFormBoundaryrzP8MUha8lcbDzdn

Content-Disposition: form-data; name="file"; filename="1.jpg"

Content-Type: image/jpeg

------WebKitFormBoundaryrzP8MUha8lcbDzdn--

is that have problem? please help me.

Answer 1

I am not sure about root cause. But I had faced the same issue and by adding below code it had fixed the issue. Try adding below code in your config

@Bean
public MultipartResolver multipartResolver() {
    return new CommonsMultipartResolverMine();
}

public static class CommonsMultipartResolverMine extends CommonsMultipartResolver {

    @Override
    public boolean isMultipart(HttpServletRequest request) {
        final String header = request.getHeader("Content-Type");
        if (header == null) {
            return false;
        }
        return header.contains("multipart/form-data");
    }
}

Answer 2

OH, I found the root cause. Unbelievable it's my Controller fault. The Class "FastDFSClient" is not be found cause this class is not belong to this module, I use IDEA and add the dependency to project structure but not add it to pom. Actually I don't know what's the different between both but if you not add to pom it will show "NoClassDefFoundError". So I add the dependency to pom then the problem is gone. I always think this is front error or I have a bad configuration but I never expect it's back error, how sad it is..

Answer 3

In your controller you should add

@RequestMapping("/upload")
public ReturnResult upload(@RequestParam("file") MultipartFile file){
......
}