博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue <input type="file">上传图片、预览、删除
阅读量:4648 次
发布时间:2019-06-09

本文共 1451 字,大约阅读时间需要 4 分钟。

使用原生<input type="file">上传图片、预览、删除;multiple实现可上传多张

参数名 类型 说明
fileTypes Array 文件类型, 默认'jpeg','bmp','gif','jpg'
limit Number 限制数量,默认5
size Number 最大图片大小,默认5M
@imgs Object 上传的图片文件

html部分

js部分

css部分

.upload-imgs{margin: 10px 0 30px 0;overflow: hidden;font-size: 0;}.upload-imgs li{position: relative;width: 118px;height: 118px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;}.upload-imgs li:hover{border-color: $them-color;}.upload-imgs .add{display: block;background-color: #ccc;color: #ffffff;height: 94px;padding: 8px 0;}.upload-imgs .add .iconfont{padding: 10px 0;font-size: 40px;}.upload-imgs li:hover .add{background-color: $them-color;}.upload-imgs li .upload{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 118px;height: 118px;}.upload-imgs .img{position: relative;width: 94px;height: 94px;line-height: 94px;}.upload-imgs .img img{vertical-align: middle;}.upload-imgs .img .close{display: none;}.upload-imgs li:hover .img .close{display: block;position: absolute;right: -6px;top: -10px;line-height: 1;font-size: 22px;color: #aaa;}

转载于:https://www.cnblogs.com/conglvse/p/9524452.html

你可能感兴趣的文章
floyd求最小环 模板
查看>>
SqlServer索引的原理与应用
查看>>
使用Kubeadm搭建Kubernetes(1.12.2)集群
查看>>
微信小程序获取当前地址以及选择地址详解 地点标记
查看>>
任务平均分配的小算法
查看>>
学习日报 7-10(验证码)
查看>>
No.3 - CSS transition 和 CSS transform 配合制作动画
查看>>
c++STL全排列
查看>>
MYSQL 5.1自动安装脚本
查看>>
Sql Server数据库备份和恢复:原理篇
查看>>
fafu oj 1266 数数
查看>>
日期和时间模块
查看>>
开发系列:03、Spark Streaming Custom Receivers(译)
查看>>
fixed与sticky的区别
查看>>
keil C51 例子
查看>>
修改hosts文件在本地使域名解析到指定IP
查看>>
Gym 101147J Whistle's New Car(dfs)
查看>>
poj 3669 Meteor Shower
查看>>
MVC后台数据赋值给前端JS对象
查看>>
win7、offcie 2010是否激活查看方法
查看>>