Vuejs 根据选择绑定图片

Question

I want to have an unlimited amount images that bind to the page based on how many are selected. In the example, I manually added 3, and manually created each method for them. But is there a way to set this up so that it will generate the correct method with the right variable information for each without having to manually do each time? If I have one input box where I can select more than 1 image...and it auto-generate the correct methods would be ideal

 new Vue({ el: '#app', data() { return { url: null, url2: null, url3: null, } }, methods: { onFileChange(e) { const file = e.target.files[0]; this.url = URL.createObjectURL(file); }, onFileChange2(e) { const file = e.target.files[0]; this.url2 = URL.createObjectURL(file); }, onFileChange3(e) { const file = e.target.files[0]; this.url3 = URL.createObjectURL(file); } } })

 body { background-color: #e2e2e2; } #app { padding: 20px; } #preview { display: flex; justify-content: center; align-items: center; } #preview img { max-width: 100%; max-height: 50px; padding-right:5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <input type="file" @change="onFileChange" /><br> <input type="file" @change="onFileChange2" /><br> <input type="file" @change="onFileChange3" /> <div id="preview"> <img v-if="url":src="url" /><br><br> <img v-if="url2":src="url2" /><br><br> <img v-if="url3":src="url3" /> </div> </div>

Answer 1

You can use multiple in file input and then create array of images:

 new Vue({ el: '#app', data: () => ({ url: [], }), methods: { onFileChange(e) { [...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f))) }, } })

 body { background-color: #e2e2e2; } #app { padding: 20px; } #preview { display: flex; justify-content: center; align-items: center; } #preview img { max-width: 100%; max-height: 50px; padding-right:5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <input type="file" multiple @change="onFileChange" /> <div id="preview" v-for="(img, i) in url":key="i"> <img:src="img" /> </div> </div>