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"&nbsp;改为:ref="'upload'+index"试试