話不多說，先上圖

實現簡單得多行多圖片上傳，可以選擇其中任意一個圖片當作你需要得預設圖傳到後臺，然後一次性提交

程式碼：

<template>
  <div>
    <div v-for="(item,index) in arr" :key="index">
      <span>{{item.name}}</span>
      <input :ref="`avatar${index}`" type="file" @change="changeImage($event,item)">
      <img style="width:30px;height:30px;" @click="imgHandle(index,indexs)" v-for="(it,indexs) in item.imgUrl" :key="indexs" :src="it" alt="">
    </div>
    <button @click="uploading()">上傳</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        {name: '測試1', imgUrl: [], fileData: []},
        {name: '測試2', imgUrl: [], fileData: []},
        {name: '測試3', imgUrl: [], fileData: []},
        {name: '測試4', imgUrl: [], fileData: []},
        {name: '測試5', imgUrl: [], fileData: []}
      ],
      file: '',
      avatar: '',
      data: {},
      seleImg: ''
    }
  },
  methods: {
    imgHandle (index, indexs) {
      this.seleImg = `${index}-${indexs}`
    },
    uploading () {
      let data = new FormData()
      this.arr.forEach((item, index) => {
        if (item.fileData.length) {
          item.fileData.forEach((it, indexs) => {
            data.append(`${index}img${indexs}`, it)
          })
          data.append(`username${index}`, item.name)
          data.append(`seleImg`, this.seleImg)
        }
      })
      this.$axios({
        method: 'post',
        url: 'http://localhost:8080/upload',
        data
      }).then(function (res) {
        console.log(res)
      }).catch(function (err) {
        console.log(err)
      })
    },
    changeImage (e, item) {
      this.file = e.target.files[0]
      item.fileData.push(this.file)
      let reader = new FileReader()
      reader.readAsDataURL(this.file)
      reader.onload = function (e) {
        item.imgUrl.push(this.result)
      }
    }
  }
}
</script>