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" alt="" ></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 实现图片上传与预览，以及清除图片的更多相关文章

  1. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  2. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  3. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  6. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  7. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. move_base Warning: Invalid argument "/map" passed to canTransform argument target_frame的解决方法

    把global_costmap_params.yaml和local_costmap_params.yaml文件里的头几行去掉“/”,然后重新编译就可以了. 效果如下:

  2. SVN clean失败解决方法

    一.问题描述 1.svn 更新或者提交时,报错:svn cleanup failed–previous operation has not finished; run cleanup if it wa ...

  3. eclipse快速查看工程代码行数

    1.点击要统计的项目或许文件夹,在菜单栏点击Search,然后点击File... 2.选中正则表达式(Regular expression),并在搜索文本框输入\n ;3.在文件名中输入*或*.jav ...

  4. js变量类型和计算

    # js入门基础-变量类型和计算 ` --首先由于我使用了一个不太合格的markdown来编写来文章,所以在移动端阅读不要太方便,建议移动端使用横屏模式或pc端阅读,当然如果你有平板那是最好的. -- ...

  5. C#使用RabbitMQ（转）

      1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地 ...

  6. Timeline扩展功能实践指南

    转载于http://forum.china.unity3d.com/forum.php?mod=viewthread&tid=32842,介绍了timeline的轨道扩展 Timeline功能 ...

  7. 从头开始学gradle【各系统安装gradle】

    所有的环境都是基于jdk1.8 java -version windows安装 下载对应的gradle.zip安装包,解压到指定文件即可,然后配置相应的环境变量即可使用 linux/mac 安装 mk ...

  8. html注意事项

    行级元素只能嵌套行级元素 块级元素可以嵌套任何元素 格力  p标签不能嵌套div a标签不能嵌套a标签

  9. HTTP请求（Request）和回应（Response）对象

    附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...

  10. OpenGL编程指南（第九版） Tiangles 学习笔记

    ////////////////////////////////////////////////////////////////////////////// // // Triangles.cpp / ...