vue实现上传图片
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="https://blog.csdn.net/aaa123aaasqw/article/details/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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhkbckf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22