https://www.iqiyi.com/v_19rz6j9v50.html
vue-image-upload-preview
项目地址：github
基于vue的图片上传和预览插件
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-upload
class="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-preview
style="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;
})
},
Notice
- 使用方法仅供参考
- /src/App.vue 有简单的例子 demo
