smart-app/pages/multimedia/saveFile.vue

<template>
	<view class="bg-white">
		<!-- 顶部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">新增{{type==0?'照片':'视频'}}</block>
			<block slot="content"></block>
			<block slot="right">
				<view class="flex justify-center">
					<button  class="margin-top-ssm  cu-btn round line-blue text-white" >
						<template v-if="handle != 'edit'">					
							<button class="cu-btn line-blue" @tap="ChooseMediaList">
								<text class="text-white">继续添加</text>
							</button>
							<text> | </text>
						</template>
						<button class=" cu-btn line-blue" @tap="uploadClick">
							<text class="text-white">保存</text>
						</button>
					</button>
				</view>
			</block>
		</cu-custom>
		<view style="position: fixed;right: 0;top: calc(var(--status-bar-height) + 200rpx);z-index: 999999;" v-if="upIng">
			<view class="bg-blue text-center flex" style="border-radius:50rpx 0 0 50rpx ;width: 200rpx;height: 70rpx;" @click="">
				<view class="cuIcon-loading2"></view>
				<view class="text-sm">
					<view>上传中</view>
					<view>已完成{{upNum}}</view>
				</view>
			</view>
		</view>
		<form>
			<view v-for="(item,index) in fileList" :key="index">
				<view class="cu-bar bg-white">
					<view class="action">
						{{item.name}}
					</view>
					<view class="action text-blue" @click="delFile(index)" v-if="!upIng">
						删除
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img"  @tap="ViewImage" :data-url="item.url" v-if="item.url">
							<image :src="item.url" mode="aspectFill" v-if="type==0"></image>
							<!-- <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view> -->
							<video :src="item.url" object-fit="fill" :id="'myVideo'+index" :ref="'myVideo'+index" style="width: 152rpx;height: 152rpx;" v-if="type==1" @click="toplay(index)" @play="videoPlay(index)" @fullscreenchange="videoFullscreen" :poster="item.snapshot" ></video>
						</view>
						<view class="solids" @tap="ChooseMedia(item)">
							<text class='cuIcon-order' style="transform:rotate(90deg);" v-if="item.url"></text>
							<text class='cuIcon-cameraadd' v-else></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">
						<text style="color: #E54D42;">*</text>
						题名
					</view>
					<input placeholder="请输入" v-model="item.fileName"></input>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">
						<text style="color: #E54D42;">*</text>
						文字说明
					</view>
					<textarea maxlength="-1" v-model="item.description" placeholder="请输入"></textarea>
				</view>
				<view class="cu-form-group">
					<view class="title">
						<text style="color: #E54D42;">*</text>
						拍摄时间
					</view>
					<picker mode="date" :value="item.filmingTime" @change="DateChange" :data-index="index">
						<view class="picker" style="height: 100rpx;text-align: left;">
							{{item.filmingTime}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">
						<text style="color: #E54D42;">*</text>
						拍摄者
					</view>
					<input placeholder="请输入" v-model="item.shooter"></input>
				</view>
				<view class="bg-gray padding-sm solid-top"></view>
			</view>
		</form>
	</view>
</template>

<script>
	import config from "../../core/api.js";
	export default {
		data() {
			return {
				type:0,//1:video,0:picture
				tagId:'',
				handle:'',
				nodeId:'',
				nodeName:'',
				userInfo:null,
				project:null,
				token : uni.getStorageSync("token"),
				url : config.api,
				fileList:[],
				// {
				// 	name:'',
				// 	fileName:'',
				// 	description:'',
				// 	shooter:'',
				// 	filmingTime:'',
				// 	url:'',
				// }
				
				videoContext:null,
				againNum:0,//重新上传次数
				upIng:false,
			}
		},
		computed:{
			upNum(){
				let num = 0;
				for (let i = 0; i < this.fileList.length; i++) {
					if(this.fileList[i].isUp){
						num++;
					}
				}
				return num + '/' + this.fileList.length;
			}
		},
		onLoad(e) {
			this.type=e.type;
			this.tagId=e.tagId;
			this.handle=e.handle;
			this.nodeId=e.nodeId;
			this.nodeName=e.nodeName;
			var userInfo = uni.getStorageSync("userInfo")
			if(userInfo){
				this.userInfo = userInfo;
				this.project =  uni.getStorageSync("porject"+"_"+userInfo.id);
			}
			if(this.handle == 'add'){
				this.ChooseMediaList();
			}else if(this.handle == 'edit'){
				this.fileList = [];
				let fileList = uni.getStorageSync('medialist');
				//console.log(typeof fileList)
				fileList.forEach((item)=>{
					item.url = item.fileUrl;
					this.fileList.push(item);
				})
				uni.removeStorageSync('medialist');
			}
		},
		methods: {
			ViewImage(e) {
				if(this.type ==0){
					uni.previewImage({
						urls: [e.currentTarget.dataset.url],
						current: 0
					});
				}
				//console.log(e)
			},
			
			toplay(index){
				console.log(index)
				this.videoContext = uni.createVideoContext(('myVideo'+index));
				this.videoContext.play();
			},
			videoPlay(index){
				this.videoContext = uni.createVideoContext(('myVideo'+index));
				this.videoContext.requestFullScreen();
			},
			videoFullscreen(fullScreen, direction){
				if(!fullScreen.target.fullScreen){
					this.videoContext.pause();
				}
			},
			ChooseMedia(item){
				if(this.type == 0){
					this.ChooseImage(item);
				}else if(this.type == 1){
					this.ChooseVideo(item);
				}
			},
			ChooseImage(item) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// #ifdef APP-PLUS
						//console.log(res)
						if(res.tempFiles[0].size>1024*1024*15){
							this.$prompt.none('上传的单张图片大小不超过15MB!');
							return
						}
						// if(res.tempFiles[0].type.indexOf('image') == -1){
						// 	this.$prompt.none('请上传图片文件');
						// 	return
						// }
						
							let arr = res.tempFiles[0].path.split('/');
							arr = arr[arr.length-1].split('.');
							res.tempFiles[0].name = arr[0];
						
						item.url = res.tempFilePaths[0];
						item.name = res.tempFiles[0].name;
						item.file = res.tempFiles[0];
						if(!item.filmingTime){
							item.filmingTime = this.happenTimeFun(new Date());
						}
						if(!item.shooter){
							item.shooter = this.userInfo.userName;
						}
						item.fileUrl = '';
						this.getMD5(res.tempFilePaths[0],item);
						// #endif
						
						// #ifdef H5
							if(res.tempFiles[0].size>1024*1024*15){
								this.$prompt.none('上传的单张图片大小不超过15MB!');
								return
							}
							if(res.tempFiles[0].type.indexOf('image') == -1){
								this.$prompt.none('请上传图片文件');
								return
							}
							item.url = res.tempFilePaths[0];
							item.name = res.tempFiles[0].name;
							if(!item.filmingTime){
								item.filmingTime = this.happenTimeFun(new Date());
							}
							item.file = res.tempFiles[0];
							if(!item.shooter){
								item.shooter = this.userInfo.userName;
							}
							item.fileUrl = '';
							//this.getMD5(res.tempFilePaths[0],item);
						// #endif
					}
				});
			},
			ChooseVideo(item){
				uni.chooseVideo({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						//console.log(res)
						// #ifdef APP-PLUS
						if(res.size>1024*1024*500){
							this.$prompt.none('上传的单个视频大小不超过500MB!');
							return
						}
						// if(res.tempFile.type.indexOf('video') == -1){
						// 	this.$prompt.none('请上传视频文件');
						// 	return
						// }
						
							let arr = res.tempFilePath.split('/');
							//console.log(arr)
							arr = arr[arr.length-1].split('.');
							res.name = arr[0];
						
						item.url = res.tempFilePath;
						item.name = res.name;
						item.file = res.tempFilePath;
						if(!item.filmingTime){
							item.filmingTime = this.happenTimeFun(new Date());
						}
						if(!item.shooter){
							item.shooter = this.userInfo.userName;
						}
						item.fileUrl = '';
						this.getMD5(res.tempFilePath,item);
						// #endif
						
						// #ifdef H5
						if(res.tempFile.size>1024*1024*500){
							this.$prompt.none('上传的单个视频大小不超过500MB!');
							return
						}
						if(res.tempFile.type.indexOf('video') == -1){
							this.$prompt.none('请上传视频文件');
							return
						}
						item.url = res.tempFilePath;
						item.name = res.name;
						if(!item.filmingTime){
							item.filmingTime = this.happenTimeFun(new Date());
						}
						item.file = res.tempFile;
						if(!item.shooter){
							item.shooter = this.userInfo.userName;
						}
						item.fileUrl = '';
						//this.getMD5(res.tempFilePath,item);
						// #endif
					}
				});
			},
			
			ChooseMediaList(){
				if(this.type == 0){
					this.ChooseImageList();
				}else if(this.type == 1){
					this.addNew();
				}
			},
			ChooseImageList() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//console.log(res)
						// #ifdef APP-PLUS
						res.tempFiles.forEach((tempFile,index,array)=>{
							if(tempFile.size>1024*1024*15){
								this.$prompt.none('上传的单张图片大小不超过15MB!');
								return
							}
							// if(tempFile.type.indexOf('image') == -1){
							// 	this.$prompt.none('请上传图片文件');
							// 	return
							// }
							
							let arr = tempFile.path.split('/');
							arr = arr[arr.length-1].split('.');
							tempFile.name = arr[0];
							
							this.addFileListOne();
							let item = this.fileList[this.fileList.length-1];
							
							item.url = res.tempFilePaths[index];
							item.name = tempFile.name;
							item.file = tempFile;
							if(!item.filmingTime){
								item.filmingTime = this.happenTimeFun(new Date());
							}
							if(!item.shooter){
								item.shooter = this.userInfo.userName;
							}
							item.fileUrl = '';
							this.getMD5(res.tempFilePaths[index],item);
						})
						// #endif
						
						// #ifdef H5
							res.tempFiles.forEach((tempFile,index,array)=>{
								if(tempFile.size>1024*1024*15){
									this.$prompt.none('上传的单张图片大小不超过15MB!');
									return
								}
								if(tempFile.type.indexOf('image') == -1){
									this.$prompt.none('请上传图片文件');
									return
								}
								
								this.addFileListOne();
								let item = this.fileList[this.fileList.length-1];
								
								item.url = res.tempFilePaths[index];
								item.name = tempFile.name;
								if(!item.filmingTime){
									item.filmingTime = this.happenTimeFun(new Date());
								}
								item.file = tempFile;
								if(!item.shooter){
									item.shooter = this.userInfo.userName;
								}
								item.fileUrl = '';
								//this.getMD5(res.tempFilePaths[0],item);
							})
						// #endif
					}
				});
			},
			
			DateChange(e) {
				this.fileList[e.currentTarget.dataset.index].filmingTime = e.detail.value;
			},
			
			//检测文件和数据是否填写
			checkData(){
				if(this.fileList.length <1){
					this.$prompt.none('请上传上传至少一个文件');
					return false;
				}
				for (var i = 0; i < this.fileList.length; i++) {
					if(!(this.fileList[i].file || this.fileList[i].fileUrl)){
						this.$prompt.none('请上传第'+(i+1)+'条的文件');
						return false;
					}
					if(!this.fileList[i].fileName || !this.fileList[i].description || !this.fileList[i].shooter || !this.fileList[i].filmingTime){
						this.$prompt.none('请完成第'+(i+1)+'条文件信息填写');
						return false;
					}
				}
				return true;
			},
			
			uploadClick(){
				if(!this.checkData()){
					return false;
				}
				
				uni.getNetworkType({
				    success: (res)=>{
						if(res.networkType != 'wifi'){
							uni.showModal({
							    title: '网络检测',
							    content: '当前非wifi网络是否继续?',
							    success:(confirm) => {
							        if (confirm.confirm) {
							            //console.log('用户点击确定');
										this.toUpLoad();
							        }
							    }
							});	
						}else{
							this.toUpLoad();
						}
				    }
				});
			},
			toUpLoad(){
				//console.log('uploadfile')
				this.uploadfile(0);
				uni.navigateBack({
				    delta: 1
				});
			},
			uploadfile(i){
				if(i >= this.fileList.length){
					//数字超出认为上传完成
					this.upIng = false;
					this.http.request('/app/multimedia/countFileN', {
						id:this.tagId
					},null,true).then((result)=>{
						if(result.result == 1){
							console.log("更新文件数量成功");
							uni.$emit('uploadComplete','');
							uni.showModal({
							    title: '提示',
							    content: '影像资料上传完成',
								showCancel:false,
							});
							//this.$prompt.none('文件上传结束');
						}
					})
					return;
				}
				this.upIng = true;
				
				
				let file = this.fileList[i];
				//console.log('uploadFile')
				let obj = { id:file.id?file.id:'',
								fileName:file.fileName,
								description:file.description,
								shooter:file.shooter,
								fileSize:file.fileSize,
								filmingTime:file.filmingTime,
								tagId:this.tagId,
								fileUrl:file.fileUrl?file.fileUrl:'',
								fileType:this.type,
								md5:file.md5,
						}
				if(this.nodeId){
					obj.nodeIdMedia = this.nodeId;
					obj.nodeName = this.nodeName;
				}
								
				uni.uploadFile({
					 url:this.url+ '/app/multimedia/uploadfile',
					 filePath: file.fileUrl?'':file.url,			 
					 name: 'file',
					 header:{"Authorization": this.token,"StoreName":uni.getStorageSync("storeName")},
					 formData:obj,
					 success:(res)=>{
						//console.log(res)
						var data = JSON.parse(res.data);
						if(data.result=="1"){
							//上传成功
							this.$set(this.fileList[i],'isUp',true);
							//console.log(data)
							this.fileList[i].id = data.datas[0].id;
							this.fileList[i].fileUrl = data.datas[0].fileUrl;
							this.fileList[i].fileSize = data.datas[0].fileSize;
							this.fileList[i].file = '';
							setTimeout(()=>{
								this.uploadfile(i+1);
							},10)
							//this.uploadfile(i+1);
						}else{
							this.$prompt.none('第'+(i+1)+'条的文件上传失败');
							if(this.againNum <3){
								this.uploadfile(i);
							}else{
								this.againNum = 0;
								this.uploadfile(i+1);
							}
							
						}
					 },
				});
			},
			
			addNew(){
				this.addFileListOne();
				let index = this.fileList.length-1;
				this.ChooseMedia(this.fileList[index]);
			},
			
			addFileListOne(){
				this.fileList.push({
						name:'',
						fileName:'',
						description:'',
						shooter:'',
						filmingTime:'',
						url:'',
					})
				let index = this.fileList.length-1;
				if(this.nodeName){
					this.fileList[index].fileName = this.nodeName+(this.type==1?'施工视频':'施工照片')
				}
			},
			
			delFile(index){
				this.fileList.splice(index,1);
			},
			
			getMD5(tempFilePaths,item){
				plus.io.getFileInfo({  
					filePath: tempFilePaths,  
					digestAlgorithm: 'md5',  
					success: res => {  
						item.md5 = res.digest;
						//console.log(item.md5)
						this.checkMD5(item.md5,item);
					}  
				})  
			},
			checkMD5(md5,item){
				this.http.request('/app/multimedia/isExist', {
					md5:md5
				}).then((result)=>{
					if(json.result === "1"){
						item.fileUrl = json.data.fileUrl;
						item.url = json.data.fileUrl;
						item.fileSize = json.data.fileSize;
						item.file = null;
					}			   
				})
			},
			
			happenTimeFun(num){//时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000			
				let y = date.getFullYear();			
				let MM = date.getMonth() + 1;			
				MM = MM < 10 ? ('0' + MM) : MM;//月补0			
				let d = date.getDate();			
				d = d < 10 ? ('0' + d) : d;//天补0
				// let h = date.getHours();			
				// h = h < 10 ? ('0' + h) : h;//小时补0		
				// let m = date.getMinutes();		
				// m = m < 10 ? ('0' + m) : m;//分钟补0	
				// let s = date.getSeconds();		
				// s = s < 10 ? ('0' + s) : s;//秒补0		
				// return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
				return y + '-' + MM + '-' + d;
			},
			
		},

	}
</script>

<style>
	.title-font{
		font-size: 30rpx;
		padding: 20rpx;
	}
	.color-black{
		color: #333333;
	}
	.icon-size{
		font-size: 60rpx;
		margin-right: 16rpx;
	}
	.cu-form-group .title {
		min-width: calc(4em + 40rpx);
	}
	.cu-btn{
		padding: 0px 5px !important;
	}
	.cuIcon-loading2{
		font-size: 40rpx;
		line-height: 70rpx;
		margin-left: 10rpx;
		margin-right: 8rpx;
	}
	.cuIcon-loading2:before {
	    animation: cuIcon-spin 2s infinite linear;
		font-family: "cuIcon";
		display: inline-block;
		margin-right: 2px;
	}
</style>