zhxy-desk/components/ui-upload-image-lv2.vue

<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>