Пустой MultipartFile [] при отправке файлов из Vue в контроллер SpringBoot - PullRequest
Новая
       10

Пустой MultipartFile [] при отправке файлов из Vue в контроллер SpringBoot

0 голосов
/ 03 февраля 2020

Я делаю программу, которая поможет мне делать ежемесячные отчеты, и я застрял при загрузке фотографий, которые мне нужны для одного вида отчетов. По какой-то причине он не получает массив в контроллере. Я использую Springboot RestController в бэкэнде и Vue с BootstrapVue и vue -ресурсом на другой стороне.

index. html (Bootstrap Vue): 

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

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

внутри 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 в браузере: 

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]);, все будет хорошо, и фотография будет загружена на сервер.

Это мой первый опыт работы с Vue и, честно говоря, я не хочу go углубляться в JS обучение, поэтому, вероятно, где-то есть какая-то глупая ошибка. В любом случае, я могу использовать al oop в JS методе, чтобы загрузить их один за другим, но это было бы так ужасно. Я надеюсь, что есть лучший способ сделать это (без каких-либо дополнительных JS библиотек, конечно).

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020

Я нашел приемлемое решение здесь { ссылка } Код Росси Робинсиона прекрасно работает. По крайней мере, это выглядит лучше, чем отправка файлов в отдельных запросах по одному.

Ответ основан на использовании getFileNames(), который помогает перебирать файлы внутри запроса, даже если их нет в массиве.

0 голосов
/ 03 февраля 2020

Если вы используете топор ios, вы должны добавить заголовок 

var headers = {
    'Content-Type': 'multipart/form-data',
};

axios.post(
    'reports/photo', 
    formData,
    {
        headers: headers,
    }
)
...

, чтобы иметь возможность отправлять файлы на сервер.

...