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" 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 实现图片上传与预览，以及清除图片的更多相关文章
- 用Ajax图片上传、预览、修改图片
首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- C#解压文件，Excel操作
/// <summary> /// 获取目录下文件路径 /// </summary> /// <param name="path"></p ...
- web前端效率提升之禁用缓存-遁地龙卷风
1.使用场景 我用的是Chrome,Ctrl+F5并不是在任何时候都能清楚缓存,这样很影响效率,下面的方式可以在开发者工具打开的使用禁止浏览器缓存任何资源, 还是出现不及时更新的情况,就要考虑服务器是 ...
- 2、for 循环
exit_flag = False for i in range(10): if i <5: continue ##继续循环下一次,后面不执行 print(i) for j in range(1 ...
- vue 前端框架 (二) 表格增加搜索
本章知识点 归纳: 1.定义全局过滤器 以及 私有过滤器 2.定义全局指令 以及 定义私有指令 3.定义键盘修饰符 4.v-for 的函数引入 5.字符串的incluede 方法,.toString( ...
- sql注入--双查询报错注入
sql注入--双查询报错注入 背景:在sqli-labs第五关时,即使sql语句构造成功页面也没有回显出我们需要的信息,看到了有使用双查询操作造成报错的方式获得数据库信息,于是研究了一下双查询的报错原 ...
- 读spring源码(一)-ClassPathXmlApplicationContext-初始化
工作来几乎所有的项目都用到了spring,却一直没有系统的读下源码,从头开始系统的读下吧,分章也不那么明确,读到哪里记到哪里,仅仅作为个笔记吧. 先看ClassPathXmlApplicationCo ...
- 用mongo和redis查询排行榜、统计活跃用户
nosql数据库能解决关系型数据库遇到的性能和扩展性的问题,本博客将以mongodb和redis两种nosql数据库为基础,简单的介绍下面两个业务场景的解决方案: 1.查询排行榜(以当日总步数排名为例 ...
- 使用freemarker模板引擎生成word文档的开发步骤
1.准备模板文档,如果word文档中有表格,只保留表头和第一行数据:2.定义变量,将word文档中的变量用${var_name}替换:3.生成xml文件,将替换变量符后的word文档另存为xml文件: ...
- C# Bitmap生成base64码
public static string ImgToBase64String(Bitmap bmp) { try { MemoryStream ms = new MemoryStream(); bmp ...
- 初学python之路-day06
每天一篇总结,今天学习了大概有深浅拷贝,元组类型,字典类型与集合类型.第一次感觉有点难度,需要花费多点时间来掌握. 深浅拷贝,分为值拷贝.浅拷贝.深拷贝. ls = [1, 'abc', [10]] ...