vue, как опубликовать список с файлами к весне - PullRequest
Новая
       13

vue, как опубликовать список с файлами к весне

0 голосов
/ 11 октября 2019

Srping boot 2.x и vue 2.x.

Мой интерфейс выглядит (не полная картина для простоты):

enter image description here

мой Java-бин: 

public class Attachment {

    private Integer eaId;

    private Integer eId;

    private String description;

    private MultipartFile file;

    //setters and getters

}

public class Booking {

    private Integer id;

    private String eNo;

    private List<Attachment> attachmentList;

    //some other fields

}

Каждый attachment элемент содержит file и file description.

Мой интерфейс: 

<tr v-for=" (a, index) in eb.attachmentList" v-bind:key="index">

 <td><input type="text" v-model="a.description" /></td>

 <td><input type="file" v-on:change="selectFile(index, $event)" /></td>

 <td><i class="far fa-trash-alt fa-lg" v-on:click="delAttachment(index)" style="color: red"></i>

</td>

</tr>

мой контроллер пружины: 

@PostMapping("/upload")
public Booking upload(@ModelAttribute Booking b) {

    //....
}

код vue: 

var vm = new Vue({
  el: '#test',
  data() {
    return {
      eb: {
        'attachmentList': []
      }
    }
  },

  methods: {    

    selectFile(index, e) {

      this.eb.attachmentList[index].file = e.target.files[0];
    },

    saveTest() {

      var formData = new FormData();

      //how to populate formData ?

      axios.post("/tf/upload",
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function() {
          //....
        })
        .catch(function(error) {
          //...
        });
    }

  }
});

Я хочу отправить эти данные формы в контроллер пружины сaxios, то есть конвертирует данные формы в Java-бин Booking и список файлов формы в List<Attachment> attachmentList из Booking.

Кажется, я должен использовать FormData, верно?

Мои проблемы :

Как заполнить FormData в моем случае?

Если просто загрузить файл, я могу использовать formData.append('file', file), а затем опубликовать его с заголовком multipart/form-data напрямую.

Но теперь есть несколько файлов и каждый файл, связанный с его описанием. Я не знаю, как сделать так, чтобы я мог получить данные формы в моем контроллере пружины.

1 Ответ

1 голос
/ 11 октября 2019

Со стороны Vue:

Сначала необходимо создать новый объект типа FormData и добавить к нему ссылку на элемент ввода, к которому вы добавляете файл.

HTML: 

<input type="file" @change="processFile($event)">

Vue: 

methods: {
  processFile(event) {
    this.myFile = event.target.files[0]
  }
}

В этом случае переменная myFile будет содержать ссылку на добавленный файл.

Когда времяпроисходит загрузка: 

const formData = new FormData();
formData.append('attribute-name-spring-expects', this.myFile, this.myFile.name);
// other attributes

Затем отправьте данные этой формы с аксиосами, например так: 

const requestConfig = { 
  headers: { 'content-type': 'multipart/form-data' }
}

axios.post(url, formData, requestConfig);
...