vue实现上传图片

【代码】vue实现上传图片。

程序小菜鸟·

3207人浏览 · 2023-05-16 17:41:02

程序小菜鸟· · 2023-05-16 17:41:02 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^