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