vue 实现图片上传与预览，以及清除图片

Posted 2021-10-26 lvxisha

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 实现图片上传与预览，以及清除图片相关的知识，希望对你有一定的参考价值。

vue写原生的上传图片并预览以及清除图片的效果，下面是demo，其中里面有vue获取input框value值的方法以及vue中函数之间的调用

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>图片demo</title>
	<link rel="stylesheet" href="../../css/font-awesome.css">
	<link rel="stylesheet" href="../../layui/css/layui.css">
	<!-- <link rel="stylesheet" href="../../css/layui_add.css"> -->
	<link rel="stylesheet" href="../../css/layui_add.css">
	<link rel="stylesheet" href="../../css/bass.css">
	<style type="text/css">
		.fun-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}
		.clears:after{
			clear: both;
			display: block;
			content: ‘‘;
			height: 0;
			overflow: hidden;
			visibility: hidden;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		/*开关*/
		.layui-form-switch i{
			top: 2px;
		}
		.layui-form-switch em{
			top: -1px;
		}
		
		#app .layui-form-switch{
			margin-top: 0;
		}
		.fun-shar-body .main{
			width: 570px;
		}
		.fun-shar-body .fun-active-main-tips{
			color: #738299;
			font-size: 14px;
			line-height: 40px;
		}
		.fun-shar-body .fun-active-main-tips1{
			line-height: 30px;
		    font-size: 14px;
		    color: #b4c1d5;
		    margin-left: 150px;
		}
		.fun-active-main-tit{
			width: 140px;
			text-align: right;
			line-height: 40px;
			height: 40px;
			color: #424f65;
			margin-right: 10px;
		}
		.fun-shar-body,.fun-shar-msg,.fun-shar-img,.fun-shar-player-tit,.fun-shar-player-msg{
			margin-top: 20px;
		}
		.fun-shar-body .imgCon{
			width: 142px;
			height: 180px;
		}
		/* 分享图标 */
		.fun-shar-body .imgCon .img{
			width: 142px;
			height: 142px;
			background-color: #F5F5F5;
			text-align: center;
			line-height: 142px;
		}
		.fun-shar-body .imgCon .img>img{
			max-width: 100%;
			max-height: 100%;
			vertical-align: middle;
		}
		.fun-shar-body .clearBtn{
			padding: 0 10px; 
			cursor: pointer;
			text-align: center;
			border-radius: 3px;
			line-height: 30px;
			border: 1px solid #ff6b7a;
			color: #ff6b7a;
			margin-left: 30px;
		}
		.fun-shar-body .clearBtn:hover{
			opacity: .8;
			filter: alpha(opacity=80);
		}
		.fun-shar-body .imgCon .upload{
			position: relative;
			width: 100%;
			height: 32px;
			text-align: center;
			line-height: 32px;
			cursor: pointer;
			background-color: #ff6b7a;
			margin-top: 6px;
			color: #fff;
			border-radius: 3px;
			overflow: hidden;
		}
		.fun-shar-body .imgCon .upload>input{
			height: 32px;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			opacity:0;
		}
		.layui-form-onswitch{
			border-color: #3aa1ff;
			background-color: #3aa1ff;
		}
		.layui-input:hover, .layui-textarea:hover{
			border-color: #3aa1ff!important;
		}
		.layui-input-block{
			margin-left: 0;
			line-height: 36px;
		}
		.fun-active-main-icon{
			line-height: 36px;
			height: 36px;
			margin-left: 5px;
		}
		.sha_btn{
			line-height: 36px;
			border:1px solid #3aa1ff;
			color: #fff;
			margin-right: 5px;
			padding: 0 15px;
			border-radius: 3px;
			background-color: #3aa1ff;
			margin-left: 10px;
			cursor: pointer;
		}
		.sha_btn:hover,.sha_btn:active{
			opacity:.8;
			filter: alpha(opacity=80);
		}
	</style>
</head>
<body>
<div id="app">
	<!-- 分享设置标题 -->
	<div class="fun-set-bg">{{msgTitle}}</div>
	<form class="layui-form" action="">
		
            <!-- 分享图标 -->
            <div class="fun-shar-img clears">
                <p class="fun-active-main-tit fl">图片：</p>
                <div class="imgCon fl">
                    <div class="img"><img id=‘imgshow‘ :src="imgUrl"  ></div>
                    <div class="upload">上传图片
						<input ref="extraFile"
						class="file-item"
						type="file"
						@change="changeImg" >
                    </div>

                </div>

                <div class="clearBtn fl" @click=‘clearImgUrl‘>清除图片</div>
            </div>
             <input type="text" v-model=‘formInput‘>
		<input type="text" ref=‘textCon‘>
	</form>
	<button @click=‘btnClick‘ class="sha_btn" v-show=‘detailShow‘>保存</button>
</div>
<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>
<script type="text/javascript" src="../../js/bass.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue-router.js"></script>
<script src="../../js/vue.js"></script>
<script>
	var vm = new Vue({
		el:‘#app‘,
		data:{
			msgTitle:‘分享设置‘,
			activeName:‘{{活动名称}}‘,
			userName:‘{{name}}‘,
			userId:‘{{Id}}‘,
			imgUrl:‘../../images/banner1.jpg‘,
			detailShow:true,
			formInput:‘‘,
			playerInfo:‘‘,
			textCon:‘‘,
			shaDes:‘‘,
			extraFile:‘‘,
		},
		mounted(){
			// this.formData()
		},
		beforeMount(){
			this.initForm()
		},
		methods:{
			initForm(){
				layui.use(‘form‘, function(){
					var form = layui.form;
					form.on(‘switch(fun-shar-switchs)‘, function(data){
						if(this.checked == true){
						    $(this).val(1);
						    layer.msg(‘开启‘);
						}else{
						    $(this).val(0);
						    layer.msg(‘关闭‘);
						}
						return false;
					})
				})
			},
			// 上传图片
		    changeImg(e) {
		      console.log(e, ‘1111‘)
		      var that = this
		      var file = e.target.files[0] || e.dataTransfer.files[0]
		      var fileSize = file.size || file.fileSize
		      var fileName = file.name
		      var len = e.target.classList.length
		      console.log(file.size, ‘2111‘)
		      if (file.name.lastIndexOf(‘.‘) === -1) {
		        this.$message.info(‘路径不正确‘)
		        return false
		      }
		      var AllImgExt = ‘.jpg|.jpeg|.gif|.bmp|.png|.swf‘
		      var extName = file.name.substring(file.name.lastIndexOf(‘.‘)).toLowerCase()
		      if (AllImgExt.indexOf(extName + ‘|‘) === -1) {
		        this.$message.info(‘非法图片格式‘)
		        return false
		      }
		      if (fileSize < 3145728) {
		        if (window.FileReader) {
		          var reader = new FileReader()
		          reader.readAsDataURL(file)
		          reader.onload = (e) => {
		            console.log(e.target + ‘img‘)
		            console.log(e.target.result + ‘img‘)
		            // that.$refs.imgzs.src = e.target.result
		            if (len > 1) {
		              that.form.wx_share_img_url = fileName
		              that.formData.set(‘share_img‘, file)
		              console.log(file, ‘share_img‘)
		              // that.formData.set(‘share_img‘, e.target.result)
		            } else {
		              console.log(file, ‘list_img‘)
		              // that.form.extra = fileName
		              // that.formData.set(‘list_img‘, file)
		            }
		            $(‘#imgshow‘).get(0).src = e.target.result;
                             this.imgUrl = e.target.result;
		            that.isUploadImg = true
		          }
		        }
		      } else {
		        this.$message.info(‘图片大小超过限制‘)
		        return false
		      }
		    },
			clearImgUrl(){//请出图片
				alert(‘清除图片‘);
				$(‘.img img‘).attr(‘src‘, ‘##‘);
			},
			btnClick(){//点击提交按钮
				let formInput = this.formInput;
				let textCon = this.textCon;
				let playerInfo = this.$refs.playerInfo.value;
				let shaDes = this.shaDes;
　　　　　　　　　　　　　　　　　　　let imgUrl = this.imgUrl;
				console.log(this.formInput);
				console.log(this.$refs.playerInfo.value);
				console.log(this.textCon);
				console.log(shaDes+‘;‘+imgUrl);
				// this.postReq(formInput, textCon, playerInfo, shaDes, imgUrl);//请求
			},
			postReq( formInput, textCon, playerInfo, shaDes, imgUrl){
				this.$http.post(‘/path/aa‘,{parem:formInput,parem2:textCon,parem3:playerInfo,parem4:shaDes,pare5:imgUrl},{emulateJSON:true}).then( res => {
					//成功执行
					console.log(res)
				}, error => {
					console.log(‘出现异常‘)
				})
			},
			isShowCon(){
				let flag = true;
				if (this.detailShow) {
					this.detailShow = false;
				}else{
					this.detailShow = true;
				}
			}
		},
		
	})
</script>
</body>
</html>

　　参考网址：https://www.cnblogs.com/qdlhj/p/10385168.html

以上是关于vue 实现图片上传与预览，以及清除图片的主要内容，如果未能解决你的问题，请参考以下文章

PHP怎样上传图片以及预览图片？

vue实现多张图片上传与预览

Vue结合element ui 实现图片上传可预览，可删除,以base64字符串上传到服务器

基于Vue + Node.js + MongoDB的图片上传组件，实现图片的预览和删除

django上传图片并且带有预览功能