uniapp 相册上传组件

 

//组件

<template>
<view class="img_box">
<view class="img_item" v-for="(item,index) in imgList" :key='index'>
<view class="item_del">
<uni-icons type="clear" @click="deleteImg(index)"></uni-icons>
</view>
<view>
<image :src="item" class="img" @click="previewImg(index)" mode="aspectFill"></image>
</view>
</view>
<view class="img_add" @click="uploadImg">+
</view>
</view>
</template>

<script>
export default{
data(){
return{
imgList:[]
}
},
props:['fileArray','uploadURL']
,methods:{
uploadImg(){
uni.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['camera','album'],
complete(res) {
//console.log(res)
},
success:(res)=> {
var img=res.tempFilePaths;
for(var i=0;i<img.length;i++){
this.imgList.push(img[i]);//添加图片
}
uni.showLoading({
title:'上传中'
})
uni.uploadFile({

// #ifdef H5
url:'/app/uploadFile.do',
//#endif
// #ifdef APP-PLUS
url:this.uploadURL,
// #endif

filePath:img[0],
name:'file',
success:(upload)=> {

if(upload.statusCode==200){
if(upload.data!=null){
this.fileArray.push(upload.data);
}
uni.hideLoading()
}
}
});
}
})
},
previewImg(index){
uni.previewImage({
urls:this.imgList,
current:this.imgList[index]
})
},
deleteImg(index){
this.imgList.splice(index,1);//删除图片
this.fileArray.splice(index,1);
},
}
}
</script>

<style>
.img_box{
min-height: 115px;
background-color: #eee;
padding: 15px;
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.img_item{
position: relative;
width: 30%;
height: 105px;
margin: 5px;
border-radius: 8px;
background-color: #FFF;
}
.img_add{
width: 104px;
height: 104px;
margin: 5px;
border-radius: 8px;
border: 2px dashed #c4c4c4;
background-color: #eee;
font-size: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.item_del{
position: absolute;
right: -8px;
top: -13px;
z-index: 1;
}
.img{
width: 100%;
height: 105px;
border: 2px solid #EE9900;
border-radius: 5px;
}
</style>

 

//引用方式

<template>

<ImgUpload :fileArray="fileArray" :uploadURL="uploadURL"></ImgUpload>

</template>

import ImgUpload from '../../../components/img-upload/img_upload.vue'
export default{
components:{
ImgUpload
},
data(){

fileArray:[],
uploadURL:this.GLOBAL.baseURL + '/uploadFile.do'

}

}