Spring 使用Angular2将多部分文件作为请求参数发送到REST服务器

我需要上传一张照片到服务器，这是使用Spring Boot编写的。对于发送请求的前端，我使用Angular2

这是我的API，它接受HTTP请求。它很好用。（我用邮递员测试了一下）

如您所见，在发送表单数据之前，我将

'file'

参数附加到表单数据中。服务器方法接受

RequestParam

作为

'file'

但是，在服务器日志中，我得到以下错误

org.springframework.web.multipart.MultipartException:当前请求 不是位于的多部分请求 org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue（RequestParamMethodArgumentResolver.java:190）

注意，由于SprinBoot隐式地处理它，所以我没有声明

commonmultipartresolver

bean。（我听说过，如果我错了，请纠正。）

---

我认为出现错误是因为请求中缺少值。Spring通过

手柄缺失值说了什么？我错过了什么
 您需要指定控制器需要多部分

@RequestMapping(method = RequestMethod.POST, value = "/tender/save-new/save-photo", consumes = {"multipart/form-data"})
public ResponseEntity<?> uploadPhoto(@RequestParam("file") MultipartFile file){

我也有同样的问题，这是我现在使用的解决方案：

对于使用弹簧护套的后端：

 @RequestMapping(value="/save", method = RequestMethod.POST)
public ResponseEntity<?> saveTemp(@RequestParam("file") MultipartFile file) throws Exception{
    String nomFichier=file.getOriginalFilename();

    try {
        byte[] bytes = file.getBytes();
        File fi=new File(tempRepo+nomFichier);
        fi.getParentFile().mkdirs();
        BufferedOutputStream bufferedOutputStream = new BufferedOutputStream((new FileOutputStream(fi)));
        bufferedOutputStream.write(bytes);
        bufferedOutputStream.close();



    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
    }
    return new ResponseEntity<>(HttpStatus.OK);
}

但是根据下面的回答，Angular2 final支持没有xhr hmm的文件上传，这很有趣，不知道它被支持，您是否知道解决方案的第二部分，在您的请求映射中放置consumes={“multipart/form data”}？是的。现在它告诉我请求的资源上存在“No”Access Control Allow Origin头。因此，不允许访问源“”。但问题是我把
@CrossOrigin（origins=”放在http://localhost:3000“”
在my controllerok中，您的问题得到解决，此错误与CORS协议有关，该协议保护您的控制器不被其他域访问，我将编辑我的答案以解决此问题。如果答案解决了您的问题，请随时接受答案。您是否将特定http请求的标头设置为某个值？不，我不设置请求的标头，它是自动完成的
@RequestMapping(method = RequestMethod.POST, value = "/tender/save-new/save-photo", consumes = {"multipart/form-data"})
public ResponseEntity<?> uploadPhoto(@RequestParam("file") MultipartFile file){

 @Configuration
 public class WebMvcConfiguration {

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD");
        }
    };
}
}

 @RequestMapping(value="/save", method = RequestMethod.POST)
public ResponseEntity<?> saveTemp(@RequestParam("file") MultipartFile file) throws Exception{
    String nomFichier=file.getOriginalFilename();

    try {
        byte[] bytes = file.getBytes();
        File fi=new File(tempRepo+nomFichier);
        fi.getParentFile().mkdirs();
        BufferedOutputStream bufferedOutputStream = new BufferedOutputStream((new FileOutputStream(fi)));
        bufferedOutputStream.write(bytes);
        bufferedOutputStream.close();



    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
    }
    return new ResponseEntity<>(HttpStatus.OK);
}

public save(file:any){

 const formData = new FormData();
 formData.append("file", file);

 return this._http
  .post('http://localhost:8081/save', formData)
  .catch(this._errorhandler);
}