uni-app上传视频

我就是我 2022-12-22 08:37 109阅读 0赞

上传单个视频

//html
    <view class="add_picture">
    	<label class="title">视频</label><br>
    	<view class="many_photo" v-show="addVideo">
    	  <image src="@/static/image/img_add.png" @click="test"></image>
    	</view>
    	<view class="" v-show="showVideo" style="position: relative;">
    		<video :src="src" style="video"></video>
    		<image src="@/static/icons/img_close.png" @click="DelImg" class="close-img" style="height: 36rpx;"></image>
    	</view>
    </view>

data中定义

src: '',
    showVideo:false,
    addVideo:true,

mthods中：

//点击上传视频
    test: function () { 
    			    var self = this;
    			    uni.chooseVideo({ 
    			        count: 1,
    			        sourceType: ['camera', 'album'],
    			        success: function (res) { 
    						console.log("选择视频成功",res)
    						self.showVideo=true
    						self.addVideo=false
    			            self.src = res.tempFilePath;
    						uni.uploadFile({ 
    							url: 'http:。。。', //接口地址
    							filePath: res.tempFilePath,
    							name: 'files',
    							// formData: { 
    							// 'user': 'test'
    							// },
    							header: { 
    								Authorization: 'Bearer ' + uni.getStorageSync('access')
    							},
    							 success: (uploadFileRes) => { 
    								console.log('1张', uploadFileRes);
    								let bold = JSON.parse(uploadFileRes.data)
    								console.log(bold)
    								console.log(bold.result[0].filePath)
    								self.returnImage = bold.result[0].filePath + bold.result[0].fileName
    								console.log("this.returnImage", self.returnImage)
    							},
    						
    						});
    			        }
    			    });
    			},
    //右上角删除视频
    	DelImg(){ 
    				this.src='',
    				this.showVideo=false,
    				this.addVideo=true
    			},

css样式：

/deep/uni-video { 
    		margin-top: 20rpx;
    		margin-left: 5%;
    	
    	}
    	.close-img { 
    		position: absolute;
    		height: 36rpx !important;
    		width: 36rpx !important;
    		top: -18rpx;
    		right: -18rpx;
    	}