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

大力水手~2025-05-09 15:12

1.碰到问题

工单里面上传完视频video组件ios无法播放视频,安卓可以
2.原因

使用了后台接口返回的url拼域名，正确做法：使用wx.chooseMedia()里面的tempFilePath（本地临时文件路径 (本地路径)），上传好了详情可以使用后台返回的url拼域名
3.代码

java 复制代码

		/*上传视频*/
			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.效果