<template>
<view class="upload-image">
<view class="pull-left" :class="itemClass" v-for="(item, index) in value" :key="item.url">
<view class="imgwarp">
<view style="margin-bottom: 100%;" class="text-center">
<!-- <u-loading-page v-if="item.loading" font-size="28" :loading="true"></u-loading-page> -->
<view style="margin-top: 20px;" v-if="item.loading" class="">
<u-loading-icon ></u-loading-icon>
</view>
<view class="img-square-warp" v-else @click="clickImg(index)" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;">
<image :src="item.type=='image' ? item.url+'?x-oss-process=image/resize,m_fill,h_200,w_200,limit_0' : item.video_img" mode="widthFix" class="img-max img-square"/>
</view>
</view>
<span v-if="showRemove" class="img-remove" @click="remove(index)"></span>
</view>
</view>
<view class="pull-left" :class="itemClass">
<view class="imgwarp ui-flex ui-flex-align-center ui-flex-center" v-if="max > value.length" @click="choose()">
<u-icon name="camera-fill" size="48" ></u-icon>
</view>
</view>
<u-popup :show="showPopup" mode="bottom" @close="showPopup = false">
<view class="ui-flex-row u-border-bottom">
<view class="ui-flex-1 ui-p f12 text-center u-border-right">照片</view>
<!-- <view class="ui-flex-1 ui-p f12 text-center" v-if="chooseVideo">视频</view> -->
</view>
<view class="ui-flex-row">
<view class="ui-flex-1 ui-p" @click="choose('image', 'camera')">
<u-icon label="拍摄照片" size="28px" space="7px" labelSize="12px" labelPos="bottom" name="camera"></u-icon>
</view>
<view class="ui-flex-1 ui-p u-border-right" @click="choose('image', 'album')">
<u-icon label="选择照片" size="28px" space="7px" labelSize="12px" labelPos="bottom" name="photo"></u-icon>
</view>
<!-- <view class="ui-flex-1 ui-p" @click="choose('video', 'camera')" v-if="chooseVideo">
<u-icon label="拍摄视频" size="28px" space="7px" labelSize="12px" labelPos="bottom" name="play-circle"></u-icon>
</view>
<view class="ui-flex-1 ui-p" @click="choose('video', 'album')" v-if="chooseVideo">
<u-icon label="选择视频" size="28px" space="7px" labelSize="12px" labelPos="bottom" name="plus-circle"></u-icon>
</view> -->
</view>
</u-popup>
</view>
</template>
<script>
// import Request from '@/common/base-request.js'
// import uLoadingIcon from '@/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue'
export default {
comments : {
},
props : {
max : {
default : 1
},
dir : {
required: false
},
itemClass : {
type : String,
default : '',
},
value : {
type : Array,
default : function(){
return []
},
},
showRemove : {
default : true,
},
crop : {
type : [Object, undefined],
default: undefined
},
type : {
type : String,
default : 'image'
}
},
computed : {
chooseVideo (){
if(this.type != 'all'){
return false;
}
return true;
}
},
data() {
return {
showPopup : false,
video: {
// isVideo : true,
// loading : true,
// videoUrl : 'xxx',
// videoCover : 'xxx'
}
}
},
methods : {
remove : function(index){
this.value.splice(index, 1);
this.$emit("input",this.value)
},
clickImg(index){
if(this.showRemove){
return
}
this.selectIndex = index;
return this.showPopup = true;
},
choose(type, sourceType){
if(!type){
this.selectIndex = null;
return this.showPopup = true;
}
this.showPopup = false;
if(type == 'image'){
uni.chooseImage({
count: this.max - this.value.length, //默认9
sourceType : [sourceType],
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
crop : this.crop,
// sourceType: ['album'], //从相册选择
success: (fileList) => {
this.toUploadImgs(fileList);
},
})
}else{
uni.chooseVideo({
sourceType: [sourceType],
maxDuration : 60,
success: (res) => {
// console.log(res);
// self.src = res.tempFilePath;
this.video = {
isVideo : true,
loading : true,
videoUrl : '',
videoCover : '',
}
let filePath = {
filePath : res.tempFilePath,
// #ifdef H5
fileInfo : res.tempFile
// #endif
};
this.value.push({
loading :true,
type : 'video',
})
let index=this.value.length-1
this.$emit("input",this.value)
this.$uploadOSS('/leapi/upload', filePath, this.dir + '/', (res) => {
if(res){
let obj={
url : res.imgurl,
video_img : res.imgurl + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300,m_fast',
loading : false,
type : 'video',
}
this.$set(this.value,index,obj)
// this.list[index].url = res.imgurl
// this.list[index].video_img = res.imgurl + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300,m_fast';
// this.list[index].loading = false
this.video.loading = false,
this.video.videoUrl = res.imgurl;
this.video.videoCover = res.imgurl + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_300,h_300,m_fast';
this.$emit("input",this.value)
}
})
}
});
}
},
toUploadImgs : function(fileList){
console.log(fileList,"filelist");
if(!fileList.tempFilePaths){
return;
}
fileList.tempFilePaths.forEach((filePath, index) => {
let file={
filePath : filePath,
// #ifdef H5
fileInfo : fileList.tempFiles[index]
// #endif
}
this.value.push({
file :file,
loading :true,
type : 'image',
})
let list_index=this.value.length-1
console.log(list_index,"list_indexlist_index",file)
uni.uploadFile({
url: 'http://125.124.170.221:8000/api/upload',
filePath: file.filePath,
name: 'file',
success: (myres) => {
console.log(myres,"mures");
let { data } = JSON.parse(myres.data);
console.log(data,"data");
let obj={
url : data.url,
loading : false,
type : 'image'
}
this.$set(this.value,list_index,obj)
this.value[list_index].url = data.url
this.value[list_index].loading = false
this.value[list_index].type = 'image'
delete this.value[list_index].file
this.$emit("input",this.value)
},
fail : (err=>{
console.log(err,"err");
})
});
// this.$uploadOSS('/leapi/upload', file, this.dir + '/', (res) => {
// if(res){
// let obj={
// url : res.imgurl,
// thumburl : res.imgurl + '?x-oss-process=style%2Fsquare200',
// loading : false,
// type : 'image'
// }
// this.$set(this.value,list_index,obj)
// // this.value[list_index].url = res.imgurl
// // this.value[list_index].thumburl = res.imgurl + '?x-oss-process=style%2Fsquare200',
// // this.value[list_index].loading = false
// // this.value[list_index].type = 'image'
// // delete this.value[list_index].file
// // this.list[index].loading = false,
// // this.list[index].thumburl = res.imgurl + '?x-oss-process=style%2Fsquare200';
// // this.list[index].imgurl = res.imgurl;
// }
// //
// this.$emit("input",this.value)
// })
});
}
},
}
</script>
<style scoped>
.upload-image .img-max{
width: 90%;
margin: 5%;
}
.upload-image .imgwarp{
width: 76px;
height: 76px;
line-height: 76px;
margin-right: 10px;
margin-bottom: 10px;
color: #ccc;
border: 1px dashed;
position: relative;
box-sizing: content-box;
}
.upload-image .img-remove{
position: absolute;
right: -10px;
top: -8px;
width: 40px;
height: 40px;
z-index: 100;
text-align: right;
line-height: normal;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NDEwQzFDNTFFMEExMUU0QURCREEwODgzQjUwQjFDRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NDEwQzFDNjFFMEExMUU0QURCREEwODgzQjUwQjFDRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0MTBDMUMzMUUwQTExRTRBREJEQTA4ODNCNTBCMUNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MTBDMUM0MUUwQTExRTRBREJEQTA4ODNCNTBCMUNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+9KF98QAABA1JREFUeNrMmmlIVFEYhr8ZjfYoMtsjTIkWQtMsXCqkspQWyB8SlmWiSSq0+L/fbbSbWZZZ4Q+DiBYEi8olkzYistL21JnIjGiXrPebORPXcWa8Z+be8b7wcmaGOec898y93znnO2MiH5W6Pns4ivnCs+BJcDA8WHzlG/wBfgs/gqvhm+Wnij770q/JS9j+KFLgNHgxHCDZxB+4Ci6DK3ARv3QFB/BAFDnwVng8aaNWeA9ciAv4oTk4oJehOAhPIX30As4D/FVNwAE8AMVeMdL+UCH/oriAn16DA3o0iktwFPlX9+EkwFulwQEdgqISDqW+UTO8BPCvVIMDeoIIW5Opb/Uajgf8+17BAT0IRQ0cQcbQAzgO8N+VH5pdfHGfgaBJsOz3OOIY7SQUl8mYSsaoX+kBLsLeYx3jtK96Cc9whEnlrZJjYGhWiHIuMSvWHttlW1qRlEjzoiOlCebHzqOsDWlkNptlqxaIO4MCxQe8YBon08LK5KWUmrKKurq6bO/rG+6phs7OWGeDNsHFJ8/8b0OFxsKr4bOOS14rO9IMbfvJ0Hle9kZVI6+EZi2Mi6HM9DWyo25jNYv19CKZmh/b27uNkhp4Z2gWt/H0+QtZ8EXMHDAzPCoRb6Qu+11LK1msVpozO5xMJntg4jI6MoJaLRZ639KmCrqo5DTdqq2XBedG6hk8Ey9iZGszfJsF8JGe4eNj5tKmjelaQTvUwg/nNG9r3264aytzszP+gzluG1a/wEA9oFnTGDzMlxZ6g9cBmhXK4GN8bcUdvFIaQrOCuPVhWrTE8IeKSlzGZI2hWUPMpKECAtxv9n93dmo6/zP4Fy0a4uiRk5nuchqXmaRU6iv3YtEC2lX0kJ2kZOZA7qlJD2i+pw8fK9ELvpmjylNepGsNrXwQN2e5DpVqF2Yu1MgzJ2enUvWCll0eqNROBufcRYGb/adP0DrBc94x1yyyplVS8+3UsB7QR0+UeozTdXd6xnluIzgoSHa0r4G5w9F7mUzN46Xn6EZNXTfo6ro70pNUecUFunilUha8TLkDOg/vEjuMXsUd887lL8rGZ02qoJ2XB6OCRnoDzfdUhfMufwvZk5tG1jbcJnudd/mFIgVgVDHbkR6ZLJGvyDMweL4y9dxtVfT44b0mhMeJeDnbYNAnAb27t9xhPvzQQNDMkutqddhNIiu6HH5jAGhmWO6cqXU34iTy0Ql9/LBy3wmucuPkaZpHBa4YS/ZjDX+L+4wVDCQFLuAtAv6YH6GLBLTHfYLMcSHnzg+QQY4LVZ8Ii1BZjJefyH70PVQjYJ7Gd8AZgG5UW8nXI/F08RB7cyR+HS4lfxyJu7mIESgWiGdhOtkT8Hw+OsSxsYWtIko8gWvJ/ieEDl/6/SfAACQq2Uox69/XAAAAAElFTkSuQmCC) no-repeat 15px 0;
background-size: 23px auto;
}
.upload-image:after{
content: ' ';
display: block;
clear: both;
}
.uloading{
position: absolute;
top : calc(50% - 7px);
left: calc(50% - 7px);
/* #ifndef H5 */
top : 0;
/* #endif */
}
</style>