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

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

<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">&times;</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)">&times;</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>