vue v-for 循环 图片上传（vue-upload-component）

Question

正常代码 （https://lian-yue.github.io/vu...）

    <div class="uploadFile-container">
      <file-upload ref="upload" v-model="uploadFiles" accept="image/*" :multiple="true" post-action="http://....." :maximum="5" @input-file="inputFile" @input-filter="inputFilter">
        <div class="uploadFile">
          <i class="camera"></i>
          <span>添加图片</span>
        </div>
      </file-upload>
      <div class="file-data" v-for="(file,fileIndex) in uploadFiles" :key="fileIndex">
        <img :src="file" alt="" :key="fileIndex">
      </div>
    </div>

methods: {

inputFile: function (newFile, oldFile) {
  if (newFile && oldFile && !newFile.active && oldFile.active) {
    // 获得相应数据
    console.log('response', newFile.response)
    if (newFile.xhr) {
      //  获得响应状态码
      console.log('status', newFile.xhr.status)
    }
  }
},

inputFilter: function (newFile, oldFile, prevent) {
  if (newFile && !oldFile) {
    // 过滤不是图片后缀的文件
    if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
      return prevent()
    }
  }

  // 创建 blob 字段 用于图片预览
  newFile.blob = ''
  let URL = window.URL || window.webkitURL
  if (URL && URL.createObjectURL) {
    newFile.blob = URL.createObjectURL(newFile.file)
  }
}

}

需求 加个v-for后，多个上传失败

    <div class="uploadFile-container" v-for="(item,index)" :key="index">
      <file-upload ref="upload" v-model="item.uploadFiles" accept="image/*" :multiple="true" post-action="http://....." :maximum="5" @input-file="inputFile" @input-filter="inputFilter">
        <div class="uploadFile">
          <i class="camera"></i>
          <span>添加图片{{item.name}}</span>
        </div>
      </file-upload>
      <div class="file-data" v-for="(file,fileIndex) in item.uploadFiles" :key="fileIndex">
        <img :src="file" alt="" :key="fileIndex">
      </div>
    </div>

Answer 1

ref="upload" 改为:ref="'upload'+index"试试

Answer 2

请问你这个问题解决了吗？我在v-for之后，在后面的图片上传都会传到第一个upload里面，请问你是怎么解决的呢