normal code ( 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)
}
}}
multiple uploads failed after adding a 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>