1.实现效果

image.png

2.input标签的属性

multiple:是否多选

<input type="file"  multiple="multiple"  accept="image/*" />

accept:文件格式，这个可以控制文件格式，比如jpeg和gif还有Png之类的

<input type="file"  multiple="multiple"  accept="image/png,image/gif,image/jpeg"  />

capture表示，可以捕获到系统默认的设备，比如：camera照相机；camcorder摄像机；microphone录音

<input type="file"  multiple="multiple"  accept="image/png,image/gif,image/jpeg"  capture="camera"  />

3.实现代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>上传文件</title>
    </head>
    <style>
        body,*{
            -webkit-tap-highlight-color:transparent;
        }
        
        .add_box{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 10px;
            position: relative;
            font-size: 8px;
            text-align: center;
            margin: 40px 20px;
            padding: 5px;
        }
            
        .flex{
            display: flex;
            align-items: center;
        }
        .add_icon{
            position: absolute;
            font-size: 50px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .i_none{
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            cursor: pointer;
            opacity: 0;
        }
        .upload_box{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }   
        .da_img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .deleBtn{
            width: 100px;
            height:100px;  
            position: absolute;  
            text-align: center;  
            line-height: 100px;  
            z-index: 10;  
            font-size: 10px;  
            background-color: rgba(255,255,255,0.8);  
            color: #777;  
            opacity: 0;  
            transition-duration: :0.7s;  
            -webkit-transition-duration: 0.7s;  
             cursor: default;
        }
        .deleBtn:hover{
            opacity: 1;  
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            
            <div class="upload_box">
                <div class="add_box" v-show="showAdd" >
                    <div class="add_icon">+</div>
                    <div>上传图片(最多5张)</div>
                    <form action="" enctype="multipart/form-data">
                        <input type="file"  multiple="multiple"  accept="image/*" class="i_none" id="i0" @change="getImg" /> 
                    </form>
                </div>
                <div class="add_box flex" v-for="(item,index) in img_list" :key="index" >
                    <div class="deleBtn" @click="del(index)">删除</div>
                    <img class="da_img" :src="item" />
                </div>
            </div>
        </div>
        <script>
            let vue=new Vue({
                el:"#app",
                data:{
                    img_list:[],
                    showAdd:true,
                },
                    
                methods:{
                    getImg(e){
                        var file = e.target.files;
                        // let oneUploadLen=file.length;
                        // if(oneUploadLen>5){
                        //  return alert("最多上传5张图片");
                        // }
                        for(var i = 0;i<file.length;i++){
                            let fileReader=new FileReader();
                            fileReader.readAsDataURL(file[i]);
                            //readAsDataURL方法将图片转为base64格式存储于result中
                            let imgSize=file[i].size;
                            if(imgSize>1024*1024*1){
                                return alert("上传图片不能超过1M");
                            } 
                            if(file[i].type != 'image/png' && file[i].type != 'image/jpeg' && file[i].type != 'image/gif'){
                                return alert("图片上传格式不正确");
                            }
                            fileReader.onload=((res)=>{//encodeURIComponent
                                let img=res.srcElement.result;
                                if(this.img_list.length<4){
                                    this.img_list.push(img);
                                }else if(this.img_list.length==4){
                                    this.img_list.push(img);
                                    this.showAdd=false;
                                }
                            })
                            // 上传失败
                            fileReader.onerror=((res)=>{
                                console.log(res)
                            })
                        }
                    },
                    del(index){
                        this.img_list.splice(index,1)
                    }
                },
                
                mounted() {
                    
                },
                created() {
                    
                },
            })
            
        </script>
    </body>
</html>