1.实现效果
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>