Javascript 所需请求部分'；文件'；不在场_Javascript_Java_Angularjs_Ajax_Spring Boot

Javascript 所需请求部分'；文件'；不在场

javascript java angularjs ajax spring-boot

Javascript 所需请求部分'；文件'；不在场,javascript,java,angularjs,ajax,spring-boot,Javascript,Java,Angularjs,Ajax,Spring Boot,大家好，我正在尝试使用AngularJs构建一个文件上传应用程序，但是我遇到了这个错误所需的请求部分“文件”不存在这是我的代码帮助我 upload.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <h1>Spring Boot File Upload Using REST</h1> <div ng-app='app'>

大家好，我正在尝试使用AngularJs构建一个文件上传应用程序，但是我遇到了这个错误所需的请求部分“文件”不存在这是我的代码帮助我

upload.html    
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<h1>Spring Boot File Upload Using REST</h1>
<div ng-app='app'>
<div ng-controller='myctrl'>

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <input type="file" id="file1" name="file" ng-files="getTheFiles($files)" 
/>
    <input type="button" ng-click="uploadFiles()" value="Upload" />
</form>


<h1> Result</h1>
<pre>
    <span id="result"></span>
</pre>

</div>
</div>
        <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>

<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

FileUploadController.java

package com.fileupload.controller；
导入java.io.IOException；
导入java.nio.file.Files；
导入java.nio.file.Path；
导入java.nio.file.path；
导入java.util.array；
导入java.util.List；
导入org.slf4j.Logger；
导入org.slf4j.LoggerFactory；
导入org.springframework.http.HttpHeaders；
导入org.springframework.http.HttpStatus；
导入org.springframework.http.ResponseEntity；
导入org.springframework.web.bind.annotation.PostMapping；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
导入org.springframework.web.bind.annotation.RequestParam；
导入org.springframework.web.bind.annotation.RestController；
导入org.springframework.web.multipart.MultipartFile；
导入com.fileupload.controller.RestFileUploadController；
@RestController
公共类RestFileUploadController{
专用最终记录器=
getLogger（RestFileUploadController.class）；
//保存上载文件的路径
私有静态字符串上传\u FOLDER=“E:\\”；
//文件上传
/*@PostMapping（“/api/upload”）*/
@RequestMapping（value=“/api/upload”，method=RequestMethod.POST）
公共响应上载文件(
@RequestParam（“文件”）多部分文件（上传文件）{
debug（“单文件上传！”）；
if（uploadfile.isEmpty（））{
返回新的响应属性（“请选择一个文件！”，
HttpStatus.OK）；
}
试一试{
保存上传文件（Arrays.asList（uploadfile））；
}捕获（IOE异常）{
返回新的响应属性（HttpStatus.BAD_请求）；
}
返回新的响应属性（“已成功上载…”+
uploadfile.getOriginalFilename（），new HttpHeaders（），HttpStatus.OK）；
}
私有void saveUploadedFiles（列表文件）引发IOException{
用于（多部分文件：文件）{
if（file.isEmpty（））{
继续；
}
byte[]bytes=file.getBytes（）；
Path Path=Path.get（上传的\u文件夹+
getOriginalFilename（））；
写入（路径，字节）；
}
}
}

我正在使用@Requestparam（“文件”）在后端控制器中使用文件名读取上载的文件，如果错误，请建议我其他方法。

'Content-Type'：未定义

-为什么？嗨，Jaromanda，如果我将Content-Type设置为“multipart/form-data”不起作用，我尝试了不同的方法。请求被拒绝，因为找不到多部分边界。所以我把它放在未定义的地方。

angular.module('app',[]);
angular.module('app')

.directive('ngFiles', ['$parse', function ($parse) {

            function fn_link(scope, element, attrs) {
                var onChange = $parse(attrs.ngFiles);
                element.on('change', function (event) {
                    onChange(scope, { $files: event.target.files });
                });
            };

            return {
                link: fn_link
            }
        } ])
.controller('myctrl', function ($scope, $http) {

            var formdata = new FormData();
            $scope.getTheFiles = function ($files) {
                angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
                });
            };

            // NOW UPLOAD THE FILES.
            $scope.uploadFiles = function () {

                var request = {
                    method: 'POST',
                    url: '/api/upload',
                    data: formdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        alert(d);
                    })
                    .error(function () {
                    });
            }
        });

package com.fileupload.controller;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Arrays;
import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.fileupload.controller.RestFileUploadController;

@RestController
public class RestFileUploadController {
    private final Logger logger = 
LoggerFactory.getLogger(RestFileUploadController.class);

    //path to save the uploaded file
    private static String UPLOADED_FOLDER = "E:\\";

    // file upload
   /* @PostMapping("/api/upload")*/
    @RequestMapping(value = "/api/upload" , method = RequestMethod.POST)
    public ResponseEntity<?> uploadFile(
            @RequestParam("file") MultipartFile uploadfile) {

        logger.debug("Single file upload!");

        if (uploadfile.isEmpty()) {
            return new ResponseEntity("please select a file!", 
HttpStatus.OK);
        }

        try {

            saveUploadedFiles(Arrays.asList(uploadfile));

        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity("Successfully uploaded - " +
                uploadfile.getOriginalFilename(), new HttpHeaders(), HttpStatus.OK);
    }

        private void saveUploadedFiles(List<MultipartFile> files) throws IOException {

            for (MultipartFile file : files) {

                if (file.isEmpty()) {
                    continue; 
                }

                byte[] bytes = file.getBytes();
                Path path = Paths.get(UPLOADED_FOLDER + 
file.getOriginalFilename());
                Files.write(path, bytes);

            }

        }

}