鍍金池/ 問答/HTML/ vue v-for 循環(huán) 圖片上傳(vue-upload-component)

vue v-for 循環(huán) 圖片上傳(vue-upload-component)

正常代碼 (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) {
    // 獲得相應(yīng)數(shù)據(jù)
    console.log('response', newFile.response)
    if (newFile.xhr) {
      //  獲得響應(yīng)狀態(tài)碼
      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()
    }
  }

  // 創(chuàng)建 blob 字段 用于圖片預(yù)覽
  newFile.blob = ''
  let URL = window.URL || window.webkitURL
  if (URL && URL.createObjectURL) {
    newFile.blob = URL.createObjectURL(newFile.file)
  }
}

}

需求 加個(gè)v-for后,多個(gè)上傳失敗

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


回答
編輯回答
嫑吢丕

ref="upload" 改為:ref="'upload'+index"試試

2018年4月16日 21:12