鍍金池/ 問(wèn)答/Java  HTML/ 如何使用vue.js+html實(shí)現(xiàn)多圖上傳可預(yù)覽，可刪除并限制上傳圖片數(shù)量

如何使用vue.js+html實(shí)現(xiàn)多圖上傳可預(yù)覽，可刪除并限制上傳圖片數(shù)量

初學(xué)vue.js,想要配合html嘗試實(shí)現(xiàn)多圖上傳可預(yù)覽，可刪除并限制上傳圖片數(shù)量，希望大牛們指導(dǎo)下vue.js部分的實(shí)現(xiàn)
html代碼：

<div class="form-group" v-if="image">

                <div class="col-sm-2 control-label">圖片預(yù)覽</div>
                <div class="col-sm-10">
                <!-- @change="onFileChange" -->
                    <img src="" alt="" style="max-height:200px;max-width:250px"/>  
                    
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">圖片上傳</div>
                <div class="col-sm-10">
                <!-- @change="onFileChange" -->
                    <input type="file" class="form-control" @change="onFileChange">
                </div>
            </div>
回答
編輯回答
拮據(jù)

給你提供一個(gè)預(yù)覽方案，多圖上傳和數(shù)量限制都只是邏輯的問(wèn)題了你思考一下應(yīng)該是沒(méi)問(wèn)題的。

let uploadFile = document.getElementById('uploadFile') //獲取input元素
      let file = uploadFile.target.files[0]
let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function(e) {
                //這里打印e找到圖片的base64塞入img標(biāo)簽就好了
            }
2018年3月15日 12:50