Vue实现上传图片功能
前言:
用vue实现上传图片功能,效果图如下:
先说文件上传控件样式美化怎么做,我有两种方法。
1.先上代码
html部分:
<div class="pics-wrapper">
<div class="addimg-bg">
<input type="file" name="uploadImg" class="ipt-file" @change="fileInput">
</div>
<ul class="imgshow">
<li v-for="(item, index) in showImg">
<img :src="item.url">
<i class="icon-del" @click="imgDel(item.id)"></i>
</li>
</ul>
</div>
CSS(scss)代码如下:
.addimg-wrapper {
border: 1px solid #dfdfdf;
border-top:;
height: 153px;
padding: 25px;
.pics-wrapper {
.addimg-bg {
float: left;
background: url(../static_img/btn-addpic.png) no-repeat center center;
width: 78px;
height: 78px;
}
.ipt-file {
width: 78px;
height: 78px;
padding:;
border:;
opacity:;
}
.imgshow {
float: left;
height: 76px;
font-size:;
li {
display: inline-block;
width: 76px;
height: 76px;
background-color: #eee;
border: 1px solid #dfdfdf;
margin-left: 5px;
position: relative;
img {
width: 100%;
height: 100%;
}
.icon-del {
display: inline-block;
position: absolute;
right:;
top:;
width: 16px;
height: 16px;
background: url(../static_img/icon-del.png) no-repeat center center;
}
}
}
}
}
给input标签外面包一层背景,加号框作为背景,input设置透明度为0
图片素材如下:
btn-addpic.png
icon-del.png
js代码如下:
<script>
new Vue({
el: '#page-publish',
data: {
msg: 'hello world',
imgData: {
accept: 'image/gif, image/jpeg, image/png, image/jpg'
},
showImg: []
},
methods: {
// 添加并上传图片
fileInput(e) {
let img1 = e.target.files[0]
let type = img1.type
let size = img1.size
if (this.imgData.accept.indexOf(type) === -1) {
alert('请选择我们支持的图片格式!')
return false
}
if (size > 3145728) {
alert('请选择3M以内的图片!')
return false
}
let fd = new FormData()
fd.append('Filedata', img1, img1.name)
axios.post('<{url action=toputil_ctl_uploads@uploads}>', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
const data = res.data.data
this.showImg.push(data)
}).catch(err => {
console.log(err)
})
},
}
})
</script>
关键点:
- 上传文件file控件的e对象里面有很多信息,其中要用到 e.target.files
- new FormData()
- 请求头header
- 请求成功返回的数据存入data中的showImg, v-for循环渲染即可。
但是我需要限制图片数量。最多5张。我可以把这个判断逻辑直接写在fileInput()方法里,但是只要一点击input,就会打开文件选择框,而后才执行fileInput方法里面的代码。这样非常不优雅。所以请看第二种方法。
2.美化上传文件控件第二种方法
Html部分:
<div class="pics-wrapper">
<div class="addimg-bg" @click="addImg"></div>
<ul class="imgshow">
<li v-for="(item, index) in showImg">
<img :src="item.url">
<i class="icon-del" @click="imgDel(item.id)"></i>
</li>
</ul>
<input ref="file" type="file" name="uploadImg" class="ipt-file" @change="fileInput">
</div>
CSS代码不变。
Html代码的变化在于单独使用一个div容器显示加号框,和input控件分离。
现在问题是点击加号框的时候如何触发input的change事情,以前用jquery很容易实现的,
jquery版代码:
$(function(){
$('input').click(function(){
// do something
})
$('a').click(function(){
$('input').click() // 触发input click事件
})
})
但这是vue啊!!!
我查了好久,终于...
解决方法如下:
(1)给input加上ref="file"
<input ref="file" type="file" name="uploadImg" class="ipt-file" @change="fileInput">
(2)js代码,在vue methods中添加如下代码
// 触发添加图片
addImg () {
if (this.showImg.length >= 5) {
alert('晒图仅限5张~')
return
}
this.$refs.file.click()
},
this.$refs.file.click()
这句是关键。
这样就实现了点击加号框,先判断数量,再触发input控件点击事件。
到这里,添加图片功能实现了,效果如下:
数量超过5张时:
3.删除图片功能
vue methods 中添加如下方法:
// 删除图片
imgDel(id) {
axios.post('<{url action=toputil_ctl_uploads@deletePic}>', { id: id }).then(res => {
console.log(res)
const data = res.data
if (data.success) {
this.showImg = this.showImg.filter((n) => {
return n.id !== id
})
} else {
alert(data.msg)
}
})
}
细节没什么要说的,传入要删除的图片id,接口请求成功后,删除相应的数据,用filter方法过滤掉数据。这功能用vue实现还是相当方便。
该页面其他功能,我会另写博文。到时再贴链接。
-----玩-----
我写技术博客的目的主要是整理自己做过的功能,主要是写给自己看,当然,我尽量写清楚。
若给你造成误解,我很抱歉。若给你带来帮助, 我很欣慰。
有疑问欢迎交流 扣扣:2136946914
Vue实现上传图片功能的更多相关文章
- 使用.Net Core+IView+Vue集成上传图片功能
最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- JAVA 上传图片功能
前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...
- MVC ueditor的使用(实现上传图片功能)
之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o( ̄ε ̄*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版uedi ...
- aspx页面中用Input 标签实现上传图片功能
实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...
- Vue.js 基本功能了解
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- Vue.js 基本功能了解一下~
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- WCF实现上传图片功能
初次学习实现WCF winform程序的通信,主要功能是实现图片的传输. 下面是实现步骤: 第一步: 首先建立一个类库项目TransferPicLib,导入wcf需要的引用System.Service ...
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
随机推荐
- ios in-house 公布整个过程(startssl认证)
首先大体说一下步骤: 1.申请苹果enterprise 账号 为应用生成app id,provision profile等 详见:http://www.th7.cn/Program/IOS/20131 ...
- 基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示)
基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示),学习就像看电影 第一部:安装部署 第二部:配置Domino 第三部:Notes8客户端配置 第四部:为Domino系统加装 ...
- 【hdu 6038】Function
[Link]:http://codeforces.com/contest/834/problem/C [Description] 给你两个排列a和b; a排列的长度为n,b排列的长度为m; a∈[0. ...
- 从”茄子快传”看应用程序怎样获取手机已安装程序的apk文件
"茄子快传"是联想开发的一款近距离文件共享软件.它通过wifi-direct(速度飞快,不须要联网)或者普通的网络(速度慢)在不同手机间传递文件. 不知为何.它就火了起来,火的也飞 ...
- php函数按地址传递参数(php引用)
php函数按地址传递参数(php引用) 一.总结 1.php引用:php引用和c++一样,都是在变量前加&(取地址符号) 2.php函数按地址传递参数:php函数按地址传递参数(php引用)也 ...
- C#截取中英文混合字符串分行显示
private int GetStrByteLength(string str) { return System.Text.Encoding.Default.GetByteCount(str); } ...
- Codefroces Round#427 div2
A. Key races time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- ubuntu14.04 printk()默认打印的位置
tail /var/log/syslog 即可显示printk打印的信息
- BZOJ3510首都(LCT)
Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...
- 【例题 8-5 UVA - 11054】Wine trading in Gergovia
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑第一个店. 如果它要酒的话,只能从第二个店那里运过来. 这样,问题就转化成后n-1个店的问题了. 然后会发现,第二家店它的情况也 ...