前言:

用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>

关键点:

  1. 上传文件file控件的e对象里面有很多信息,其中要用到 e.target.files
  2. new FormData()
  3. 请求头header
  4. 请求成功返回的数据存入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实现上传图片功能的更多相关文章

  1. 使用.Net Core+IView+Vue集成上传图片功能

    最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...

  2. 中小研发团队架构实践之生产环境诊断工具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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  3. JAVA 上传图片功能

    前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...

  4. MVC ueditor的使用(实现上传图片功能)

    之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o( ̄ε ̄*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版uedi ...

  5. aspx页面中用Input 标签实现上传图片功能

    实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...

  6. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  7. Vue.js 基本功能了解一下~

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  8. WCF实现上传图片功能

    初次学习实现WCF winform程序的通信,主要功能是实现图片的传输. 下面是实现步骤: 第一步: 首先建立一个类库项目TransferPicLib,导入wcf需要的引用System.Service ...

  9. sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)

    sql server 关于表中只增标识问题   由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...

随机推荐

  1. ios in-house 公布整个过程(startssl认证)

    首先大体说一下步骤: 1.申请苹果enterprise 账号 为应用生成app id,provision profile等 详见:http://www.th7.cn/Program/IOS/20131 ...

  2. 基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示)

    基于Linux平台的Lotus Domino 8系统部署五部曲(全视频展示),学习就像看电影 第一部:安装部署 第二部:配置Domino 第三部:Notes8客户端配置 第四部:为Domino系统加装 ...

  3. 【hdu 6038】Function

    [Link]:http://codeforces.com/contest/834/problem/C [Description] 给你两个排列a和b; a排列的长度为n,b排列的长度为m; a∈[0. ...

  4. 从”茄子快传”看应用程序怎样获取手机已安装程序的apk文件

    "茄子快传"是联想开发的一款近距离文件共享软件.它通过wifi-direct(速度飞快,不须要联网)或者普通的网络(速度慢)在不同手机间传递文件. 不知为何.它就火了起来,火的也飞 ...

  5. php函数按地址传递参数(php引用)

    php函数按地址传递参数(php引用) 一.总结 1.php引用:php引用和c++一样,都是在变量前加&(取地址符号) 2.php函数按地址传递参数:php函数按地址传递参数(php引用)也 ...

  6. C#截取中英文混合字符串分行显示

    private int GetStrByteLength(string str) { return System.Text.Encoding.Default.GetByteCount(str); } ...

  7. Codefroces Round#427 div2

    A. Key races time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  8. ubuntu14.04 printk()默认打印的位置

    tail /var/log/syslog 即可显示printk打印的信息

  9. BZOJ3510首都(LCT)

    Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...

  10. 【例题 8-5 UVA - 11054】Wine trading in Gergovia

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑第一个店. 如果它要酒的话,只能从第二个店那里运过来. 这样,问题就转化成后n-1个店的问题了. 然后会发现,第二家店它的情况也 ...