基于vue的图片上传预览插件

https://www.iqiyi.com/v_19rz6j9v50.html

vue-image-upload-preview
项目地址：github

基于vue的图片上传和预览插件

该组件引用了 mint-ui 和 lrz

Install

npm install vue-image-upload-preview --save-dev

Usage
引入图片上传和预览组件，可按需引入

  import {ImageUpload , ImagePreview} from 'vue-image-upload-preview'

注册下组件

  components:{'image-preview':ImagePreview,'image-upload':ImageUpload}

使用组件

  <template><div><!-- 图片上传 --><image-uploadclass="image-upload"ref='imgaeUpload':url='http://XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX':touch-size = 1:multiple = true:lrz-options = {width:1024}field-name = 'serverImgFile':data = {}:max-count = 10@chooseImages='bindtap_chooseImages'/><!-- 图片预览 --><image-previewstyle="z-index:200":images="preImages"v-model="index":numIsShow="true":deleteIsShow="true"@delete="bindtap_delete"/></div></template>

与数据绑定

    data() {return {index: -1,images: []}},computed:{preImages() {return this.images.map(v=>{return v.src});}}

上传图片

  this.$refs.imgaeUpload.uploadImages(this.images).then(res => {...}).catch(res => {...})

定义按钮样式

  .image_upload{  height: 60px; width: 60px;background: red}

Props
ImageUpload
url - String - 上传图片的路径；
field-name - Stirng - 上传图片的字段名；
multiple - Boolean - [default:false] - 是否支持图片多选；
lrz-options - Object - [default:{quality:0.7}] - 图片压缩选项，参考（https://github.com/think2011/localResizeIMG/wiki/2.-参数文档)；
max-count - Number - [default:-1] - -1表示无限张；
chooseImages - Function - 选择图片回调；

    bindtap_chooseImages(e){/** 选择成功 e是一个数组* e[0].file 图片文件对象，用于上传* e[0].src 图片base64，用于预览* e[0].compress 图片是否经过压缩*/if(Array.isArray(e)){this.images = this.images.concat(e);}else {console.log(e);}}

ImagePreview
images - Array - [default:[]] - 预览图片的所有路径；
deleteIsShow - Boolean - [default:false] - 是否显示删除按钮；
numIsShow - Boolean - [default:false] - 是否显示数字；
chooseImages - Function - 选择图片回调；

    bindtap_delete(e){/** e 当前显示的图片的下标(双向绑定index，可以忽略e)* this.images 存储选择图片传过来的对象* this.index 双向绑定当前显示的图片的下标* 下面是删除的例子*/this.images = this.images.filter((v,i) => {return this.index!=i;})},

基于vue的图片上传预览插件相关推荐

dropify,不错的图片上传预览插件
引言传统的图片上传,很丑.点击选择之后,还无法预览. 有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦. 用这个dropify,就可以解决之歌问题. 看效果用法 1.引入文件,需要jque ...
JAVA微信公众号开发第8篇JSSDK图片上传预览
简介博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文页面 <html><head ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...

基于vue的图片上传预览插件

基于vue的图片上传预览插件相关推荐

最新文章

热门文章