移动端图片上传预览进度显示

vue-img-upload

移动端图片带预览上传组件
项目地址:https://github.com/duanxb/vue-img-upload

功能

+ 1、以兼容安卓、苹果端浏览器与微信端浏览器;
+ 2、图片上传预览展示
+ 3、图片上传进度展示
+ 4、不足:目前只支持一次上传一个文件,可在Html中实现多个文件上传的功能
+ 5、不足:暂不支持图片压缩,后期可添加该功能

演示

vue-img-upload

Code DEMO

<vue-img-uploader :readonly="readonly" theme="light" accept="image/*" icon="camera" bgimage="/static/imgs/seriouswork/idcard-z.png" :img-src="relationFiled.idcard_positive_url" :ajax-url="uploadApi" @uploadsuccess="onUploadSuccess($event, 'idcard_positive')"></vue-img-uploader>

Props 参数

参数 说明
accept [String], 默认情况下可能会导致选择框弹出慢的问题,请针对具体化图片类型即可解决,默认:'image/,video/;'
id [String],唯一性,默认自动生成一个随机数
onChange [Function]:文件选择回调
readonly [Boolean] 是否设置为只读模式,只读模式,不可上传。
readonlyTipText [String] 只读模式下,显示的文案,默认:'不可更改'
bottomText [String] 选择图片后,底部显示的文案,默认:'点击图片以修改'
icon [String] 显示的图标
maxSize [Number] 上传图片的大小,默认最大为:5M
theme [String] 上传控件的classname
bgimage [String] 上传控件的背景图
ajaxUrl [String] ajax上传的URL
iframeUploadUrl [String] IE9中iframe 上传url

事件

参数 说明
input [Function] 双向绑定, 传递file文件信息
onChange [Function] 文件选择回调;参数为 file文件信息
uploadsuccess 上传成功的回调,参数为ajax返回的data
uploaderror 上传失败的回调,参数为ajax返回的data

Authors

  • 如果你遇到了什么神bug,请发起 ISSUE 联系我 ~
  • 致力于前端开发,一起努力中……
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,176评论 0 1
  • 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥阅读 2,356评论 0 34
  • 用户图片上传思路: 1.点击上传,通过一个input type="file"选择你要上传的图片2.点击确定,马上上...
    sweetBoy_9126阅读 1,544评论 0 2
  • Vue2.0+组件库总结 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基...
    szch阅读 1,981评论 1 52
  • 前端知识结构https://github.com/JacksonTian/fks Web前端开发大系概览https...
    柴东啊阅读 1,069评论 0 10