从Vue向SpringBoot控制器发送文件时，空MultipartFile [] [英] Empty MultipartFile[] when sending files from Vue to SpringBoot controller

问题描述

我正在做一个程序，可以帮助我制作月度报告，而我坚持上传需要一种报告的照片.由于某种原因，它在控制器中没有数组. 我在后端使用Springboot RestController，在Vue上使用BootstrapVue，在另一端使用 vue-resource .

I'm doing a program that will help me to make monthly reports and I stuck at uploading photos which I need for one kind of the reports. For some reason, it doesn't get an array in the controller. I use Springboot RestController at the backend and Vue with BootstrapVue and vue-resource on the other side.

index.html(BootstrapVue):

index.html (BootstrapVue):

  <b-form-file
    v-model="photos"
    accept="image/*"
    multiple
    placeholder="..."
  ></b-form-file>

  <b-button @click="uploadPhotos">Upload</b-button>

在vuemain.js内部:

inside vuemain.js:

  data: {
    photos: null,
  },
  methods: {
    uploadPhotos(){
    var formData = new FormData();
    formData.append("photos", this.photos);
    this.$http.post('reports/photo', formData).then(result => {
      ...
    })
  }, ...

内部控制器:

@PostMapping("/photo")
public void addPhoto(@RequestParam("photos") MultipartFile[] photo) {
    System.out.println(photo.length); // shows 0
}

我在浏览器的Params中看到的内容:

what I see inside Params at browser:

XHRPOSThttp://localhost:8080/reports-maker/reports/photo
[HTTP/1.1 500  326ms]
Request payload 
-----------------------------4469196632041005505545240657
Content-Disposition: form-data; name="photos"
[object File],[object File],[object File],[object File]
-----------------------------4469196632041005505545240657--

因此由于某种原因，此时@RequestParam("photos") MultipartFile[] photo它是空数组.但是，如果我将其更改为仅一张这样的照片:@RequestParam("photos") MultipartFile photo并从js发送一张照片:formData.append("photos", this.photos[0]);一切正常，照片将上传到服务器.

So for some reason at this point @RequestParam("photos") MultipartFile[] photo it's empty array. But if I change it to just one photo like this: @RequestParam("photos") MultipartFile photo and send one from js: formData.append("photos", this.photos[0]); everything works nicely and photo gets uploaded to the server.

这是我第一次使用Vue，老实说，我不想深入学习JS学习，因此某个地方可能存在一些愚蠢的错误.无论如何，我都可以使用JS方法中的循环将它们一个接一个地上传，但这太丑陋了.我希望有一个更好的方法(当然不需要任何其他JS库).

It's my first experience with Vue and to be honest I don't want to go deep into JS learning, so probably there is some silly mistake somewhere. Any way I can use a loop in JS method to upload them one by one, but that would be so ugly. I hope there is a better way to do it (without any additional JS libraries of course).

推荐答案

我在这里 https://stackoverflow.com找到了可接受的解决方案/a/33921749/11508625 Rossi Robinsion的代码效果很好.至少看起来比逐个发送单独请求中的文件更好.

I found an acceptable solution here https://stackoverflow.com/a/33921749/11508625 Rossi Robinsion's code works nicely. At least it looks better than sending files in separate requests one by one.

答案基于使用

The answer is based on using getFileNames() which helps to iterate on files inside a request even if they are not in the array.

这篇关于从Vue向SpringBoot控制器发送文件时，空MultipartFile []的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！