图片上传预览（可根据自己得需要封装组件）

话不多说，先上图

实现简单得多行多图片上传，可以选择其中任意一个图片当作你需要得默认图传到后台，然后一次性提交

图片上传重要得也就两个属性：new FormData()和new FileReader()

代码：

<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>