https://www.iqiyi.com/v_19rz6j9v50.html
vue-image-upload-preview
項目地址：github
基于vue的圖片上傳和預(yù)覽插件
Install
npm install vue-image-upload-preview --save-dev
Usage
- 引入圖片上傳和預(yù)覽組件志鞍，可按需引入
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'
/>
<!-- 圖片預(yù)覽 -->
<image-preview
style="z-index:200"
:images="preImages"
v-model="index"
:numIsShow="true"
:deleteIsShow="true"
@delete="bindtap_delete"
/>
</div>
</template>
- 綁定數(shù)據(jù)
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.-參數(shù)文檔)顺呕； -
max-count-Number- [default:-1] - -1表示無限張龙致； -
chooseImages-Function- 選擇圖片回調(diào)；
bindtap_chooseImages(e){
/*
* 選擇成功 e是一個數(shù)組
* e[0].file 圖片文件對象萤厅，用于上傳
* e[0].src 圖片base64，用于預(yù)覽
* e[0].compress 圖片是否經(jīng)過壓縮
*/
if(Array.isArray(e)){
this.images = this.images.concat(e);
}else {
console.log(e);
}
}
ImagePreview
-
images-Array- [default:[]] - 預(yù)覽圖片的所有路徑靴迫； -
deleteIsShow-Boolean- [default:false] - 是否顯示刪除按鈕惕味； -
numIsShow-Boolean- [default:false] - 是否顯示數(shù)字； -
chooseImages-Function- 選擇圖片回調(diào)玉锌；
bindtap_delete(e){
/*
* e 當(dāng)前顯示的圖片的下標(biāo)(雙向綁定index名挥，可以忽略e)
* this.images 存儲選擇圖片傳過來的對象
* this.index 雙向綁定當(dāng)前顯示的圖片的下標(biāo)
* 下面是刪除的例子
*/
this.images = this.images.filter((v,i) => {
return this.index!=i;
})
},
Notice
- 使用方法僅供參考
- /src/App.vue 有簡單的例子 demo
