如何使用vue.js+html实现多图上传可预览，可删除并限制上传图片数量

Question

初学vue.js,想要配合html尝试实现多图上传可预览，可删除并限制上传图片数量，希望大牛们指导下vue.js部分的实现
html代码：

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

                <div class="col-sm-2 control-label">图片预览</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>
            

Answer 1

给你提供一个预览方案，多图上传和数量限制都只是逻辑的问题了你思考一下应该是没问题的。

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标签就好了
            }