How to use vue.js+html to upload multiple images to preview, delete and limit the number of uploaded pictures

beginner vue.js, wants to cooperate with html to try to upload multiple images to preview. You can delete and limit the number of pictures to be uploaded. I hope you can implement the vue.js part under the guidance of Daniel
html Code:

.

< div class= "form-group" Vmurf = "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>
            
Mar.06,2021

provides you with a preview solution. Multiple image uploads and quantity restrictions are just logical problems. It should be no problem for you to think about it.

let uploadFile = document.getElementById('uploadFile') //input
      let file = uploadFile.target.files[0]
let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function(e) {
                //ebase64img
            }
  • Invalid problem with vue.js deleting preview picture.

    vue.js rookie, is trying to do a multi-image preview delete and upload function, has achieved a single image upload preview, deletion also encountered some problems, I hope Daniel guide the confusion, attach the html,vue.js code. main problem: when sel...

    Mar.07,2021
Menu