微信小程序上传视频,解决ios上传完video组件无法播放

发布于:2025-05-11 ⋅ 阅读:(19) ⋅ 点赞:(0)

1.碰到问题
工单里面上传完视频video组件ios无法播放视频,安卓可以
2.原因
使用了后台接口返回的url拼域名 , 正确做法:使用wx.chooseMedia()里面的tempFilePath(本地临时文件路径 (本地路径)),上传好了详情可以使用后台返回的url拼域名
3.代码

		/*上传视频*/
			chooseVideo() {
				uni.chooseMedia({
					maxDuration: 30, //拍摄视频最长拍摄时间,单位秒。最长支持 60 秒
					count: 1,
					mediaType: ["video"],
					sourceType: ['album', 'camera'],
					sizeType:['compressed'],
					success: res => {
						if (res.size / 1024 / 1024 > 20) {
							return uni.showToast({
								icon: "none",
								title: "拍摄视频过大,请重新拍摄!",
							});
						}
						console.log('kkkk')
						console.log(res)
						console.log('kkkk')
						this.uploadFile(res.tempFiles[0]);
					}
				})
			},
			/*视频上传*/
			uploadFile(file) {
				let that = this;
				uni.showLoading({
					title: "努力加载中",
					mask: true
				});
				console.log(file)
				this.videoList.push(file.tempFilePath) // 重要代码!!!!!!!
				// 以文件流的方式上传文件
				uni.uploadFile({
					url: that.$A.uploadFiles,
					filePath: file.tempFilePath || "",
					name: "file",
					formData: {
						attachType: 'breakdown'
					},
					header: {
						Authorization: wx.getStorageSync("token")
					},
					success: async (res) => {
						uni.hideLoading()
						let resp = JSON.parse(res.data)
						console.log(resp)
						if (resp && resp.status == 200) {
							that.saveVideoList = []
							let urls = BASEURL + resp.data.attachPath
							that.saveVideoList.push(resp.data)
						}

					},
					fail: (err) => {
						uni.hideLoading()
						console.log("图片上传接口调用失败", err);
					},
				});
			},

4.参考文档
在这里插入图片描述
微信小程序文档
5.效果
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到