uniapp文件上传(视频和图片)

电玩女神 2022-11-20 09:33 539阅读 0赞

## 代码看效果，接口改成自己的 ##

<template>
    	<view class="box">
    		
    		<view>
    			<view class="fileTitle">实拍视频</view>
    			<view v-if="videoSrc == ''" class="file videoFile" @tap="chooseVideo">
    				<image style="width:112upx;height:98upx;" :src="app + '/xj.png'" mode=""></image>
    			</view>
    			<view v-else class="file videoFile video_Box">
    				<video :src="videoSrc" controls></video>
    				<view class="closeA" @tap="deleteVideo">×</view>
    			</view>
    		</view>
    		
    		<view>
    			<view class="fileTitle">实拍照片</view>
    			<view class="photoBox" name="photoBox">
    				<canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}" canvas-id="firstCanvas" ref="mycanvas"></canvas>
    				<block v-for="(item, index) in photosSrc" :key="index">
    					<view class="file imgFile">
    						<image class="photo" :src="item"></image>
    						<view class="close" @tap="deletePhoto(index)">×</view>
    					</view>
    				</block>
    				<view v-if="photosSrc.length < 6" class="file imgFile" @tap="chooseImage">
    					<image style="width: 112upx;height: 98upx;" :src="app + '/xc.png'" mode=""></image>
    				</view>
    			</view>
    		</view>
    		
    		<view class="surereply" @tap='tiJIao'>
    			提交
    		</view>
    	</view>
    </template>
    
    <script>
    	let baseUrl=getApp().globalData.baseUrl;//域名
    	export default { 
    		data() { 
    			return { 
    				app: getApp().globalData.peiImg,//图片
    				videoFile: '',
    				videoSrc: '', // 视频资源路径
    				photosSrc: [], //照片的路径
    				pic_tempFilePath: [], //上转图片的数组
    				video_tempFilePath: '', //上传视频的地址
    				file: '',
    				thumbTempFilePath: '', // 视频缩略图临时地址
    				tempFilePath: [], // 视频资源临时地址
    				shuiyinpath: '', // 带水印的视频缩略图
    				w: '',
    				h: '',
    				mobile1_wx:1,
    				imageLists:[],
    				params:'',/* 钓场id */
    				optionName:''/* 钓场name */
    			};
    		},
    		onLoad(option) { 
    				console.log('235446554464',option)
    			this.params=option.id;
    			this.optionName=option.name;
    		},
    		methods:{ 
    			// 选择视频 并上传
    			chooseVideo() { 
    				var that = this;
    				uni.chooseVideo({ 
    					count: 1, //选择多少个视频
    					sourceType: ['album', 'camera'], //视频来源相册和相机都可以
    					maxDuration: 30, //相机拍摄最大时长为30S
    					camera: 'back', //默认摄像头是后置摄像头
    					success: res => { 
    						console.log('打印视频');
    						console.log(res);
    						console.log(res.tempFilePath);
    						this.videoSrc=res.tempFilePath;
    						this.video_tempFilePath = res.tempFilePath;
    						
    						uni.uploadFile({ 
    							 url:baseUrl+'/api/place/uploadFile',
    							 filePath:res.tempFilePath,
    							 name:'file',
    							 formData:{ 
    								 token:uni.getStorageSync('userInfo').token,
    								 type:1,
    								 file:res.tempFilePath,
    							 },
    							 header:{ "Content-Type":"multipart/form-data"},
    							 success:res=>{ 
    								//console.log('上',res.data)
    								let data = JSON.parse(res.data)
    								that.video_tempFilePath=data.data.file_url
    							 }
    						})		
    						
    						
    						
    						this.pic_tempFilePath = res.tempFilePath;
    						if (res.duration > '300') { 
    							uni.showToast({ 
    								title: '视频不得超过5分钟,请重新选择',
    								icon: 'none',
    								duration: 1500
    							});
    						} else if (res.size > '10485760') { 
    							uni.showToast({ 
    								title: '视频时长不得超过10MB,请重新选择',
    								icon: 'none',
    								duration: 1500
    							});
    						}
    					},
    					fail: res => { 
    						uni.showModal({ 
    							content: '视频格式不正确，请重新选择',
    							showCancel: false
    						});
    					}
    				});
    			},
    			
    			
    			
    			// 选择照片
    			chooseImage() { 
    				let that = this;
    				uni.chooseImage({ 
    					count: 6, //从相册中都可选择的图片个数
    					sizeType: ['original', 'compressed'], //选择图片的大小
    					sourceType: ['album', 'camera'], //选择图片的来源
    					success: res => { 
    						//图片数组
    						let tempFilePath = res.tempFilePaths; 
    						let num = 0;
    						let inter = setInterval(()=>{ 
    							that.setimg(tempFilePath[num]);
    							num++;
    							if(num==tempFilePath.length){ 
    								num= 0 ;
    								clearInterval(inter);
    							}
    						},500)
    					}
    				});
    			},
    			
    			//获取图片信息
    			setimg(e){ 
    				let date = "--晒渔--";   
    				let that = this;
    				let ctx = uni.createCanvasContext('firstCanvas',this);
    				uni.getImageInfo({ 
    					src:e,
    					success: (res) => { 
    						that.w = res.width/2+'px';
    						that.h = res.height/2+'px';
    						//初始化画布
    						
    						ctx.fillRect(0, 0, that.w, that.h);
    						
    						// //将图片src放到cancas内，宽高为图片大小
    						ctx.drawImage(res.path,0,0,res.width/2,res.height/2);
    						
    						ctx.rotate(45 * Math.PI / 180); 
    									
    						//对斜对角线以左部分进行文字的填充
    						for (let j = 1; j < 10; j++) {  //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
    							ctx.beginPath();
    							ctx.setFontSize(20);
    							ctx.setFillStyle("rgba(169,169,169,.6)");
    							
    							ctx.fillText(date, 0, 50 * j);
    							for (let i = 1; i < 10; i++) {  //这个for循环代表横向循环，
    								ctx.beginPath();
    								ctx.setFontSize(20);
    								ctx.setFillStyle("rgba(169,169,169,.6)");
    								ctx.fillText(date, 80 * i, 50 * j);
    								
    							}
    						} //两个for循环的配合，使得文字充满斜对角线的左下部分
    									
    						// 对斜对角线以右部分进行文字的填充逻辑同上
    						for (let j = 0; j < 10; j++) { 
    							ctx.beginPath();
    							ctx.setFontSize(20);
    							ctx.setFillStyle("rgba(169,169,169,.6)");
    									
    							ctx.fillText(date, 0, -50 * j);
    							for (let i = 1; i < 10; i++) { 
    								ctx.beginPath();
    								ctx.setFontSize(20);
    								ctx.setFillStyle("rgba(169,169,169,.6)");
    								ctx.fillText(date, 80 * i, -50 * j);
    							
    							}
    						}
    						ctx.rotate(-45 * Math.PI / 180);
    						ctx.draw(false, () => { 
    							uni.canvasToTempFilePath({ 	//将画布中内容转成图片，即水印与图片合成
    							  canvasId: 'firstCanvas',
    							  success: (res) => { 
    								  	that.photosSrc.push(res.tempFilePath);
    									
    								  /* 把所有的图片给了后台 重点*/
    								  	 uni.uploadFile({ 
    								  		 url:baseUrl+'/api/place/uploadFile',
    								  		 filePath:res.tempFilePath,
    								  		 name:'file',
    								  		 formData:{ 
    								  			 token:uni.getStorageSync('userInfo').token,
    								  			 type:1,
    								  			 file:res.tempFilePath
    								  		 },
    								  		 header:{ "Content-Type":"multipart/form-data"},
    								  		 success:res=>{ 
    								  			let data = JSON.parse(res.data)
    								  			that.imageLists.push(data.data.file_url)
    								  		 }
    								  	 })			 
    	
    								  
    								  if (that.photosSrc.length > 6) { 
    								  	that.photosSrc = that.photosSrc.slice(0, 6);
    								  	uni.showToast({ 
    								  		title: '照片最多上传6张',
    								  		icon: 'none',
    								  		duration: 1500
    								  	});
    								  } else { 
    								  	
    								  }
    								  
    							  }
    							})
    						})
    						
    						
    						
    					}
    				})
    			},
    			
    			
    			
    			//删除照片
    			deletePhoto(index) { 
    				this.photosSrc.splice(index, 1);
    				this.thumbTempFilePath = '';
    			},
    			/* 删除视频 */
    			deleteVideo(){ 
    				this.videoSrc=''
    			},
    			tiJIao(){ 
    				if(this.videoSrc==''){ 
    					uni.showToast({ 
    						icon: 'none',
    						title: '请上传视频',
    						duration: 1500
    					});
    				}else if (this.photosSrc.length == 0) { 
    					uni.showToast({ 
    						icon: 'none',
    						title: '实拍照片最少上传一张',
    						duration: 1500
    					});
    				} else { 
    					/* 调接口 */
    					let url = '/api/place/placeAddVedio';
    					let data = { 
    						token:uni.getStorageSync('userInfo').token,
    						pid:this.params,
    						title:this.optionName,
    						vedioUrl: this.video_tempFilePath,//视频路径
    						imgUrl:this.imageLists.join(","),// 多图片
    					};
    					this.$request.post(url, data).then(res => { 
    						if(res.code==1){ 
    							uni.showToast({ 
    							    title: '提交成功',
    								icon:'none'
    							});
    							setTimeout(function () { 
    							    // uni.redirectTo({ 
    							    // url:'./fishingPlaceDetail'
    							    // })
    								uni.navigateBack({ 
    								    delta: 1
    								})
    							}, 2000);
    						}else if(res.code==100){ 
    								uni.showToast({ 
    								    title: '请购买上传次数',
    									icon:'none'
    								});
    							}
    						
    					});
    				}
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.box{ 
    		width: 95vw;
    		margin: 0 auto;
    	}
    	/* 按钮 */
    	.surereply { 
    		background: #fd1441;
    		box-shadow: 8upx 13upx 20upx 0px rgba(0, 0, 0, 0.1);
    		line-height: 75upx;
    		border-radius: 10upx;
    		color: #fff;
    		text-align: center;
    		font-size: 34upx;
    		margin: 40upx auto;
    	}
    	
    	.photoBox { 
    		display: flex;
    		flex-wrap: wrap;
    		justify-content: space-between;
    	}
    	.photo { 
    		width: 300upx;
    		height: 300upx;
    	}
    	.video_Box{ 
    		position: relative;
    	}
    	.closeA{ 
    		width: 45upx;
    		height: 45upx;
    		background-color: rgba(0, 0, 0, 0.7);
    		border-radius: 50%;
    		font-size: 36upx;
    		text-align: center;
    		line-height: 50upx;
    		color: #fff;
    		position: absolute;
    		top: -17rpx;
    		right: -8rpx;
    		z-index: 666;
    	}
    	
    	.fileTitle { 
    		height: 90upx;
    		line-height: 90upx;
    		font-size: 32upx;
    	}
    	.file { 
    		width: 220upx;
    		height: 220upx;
    		border: solid 1px #ccc;
    		border-radius: 10upx;
    		display: flex;
    		font-size: 50px;
    		align-items: center;
    		justify-content: center;
    		color: #ccc;
    		image { 
    			width: 100%;
    			height: 100%;
    		}
    	}
    	video { 
    		width: 220upx;
    		height: 220upx;
    	}
    	.imgFile { 
    		width: 220upx;
    		height: 220upx;
    		margin-bottom: 30upx;
    		position: relative;
    	}
    	.close { 
    		width: 45upx;
    		height: 45upx;
    		background-color: rgba(0, 0, 0, 0.7);
    		border-radius: 50%;
    		font-size: 36upx;
    		text-align: center;
    		line-height: 50upx;
    		color: #fff;
    		position: absolute;
    		top: 0upx;
    		right: 5upx;
    		z-index: 66;
    	}
    </style>