微信小程序上传视频,解决ios上传完video组件无法播放
在微信小程序中,上传视频后iOS设备无法播放,而安卓设备正常。问题的根本原因是后端返回的URL在iOS上无法正确处理视频大小。解决方案是使用wx.chooseMedia()中的tempFilePath(本地临时文件路径)上传视频,并在详情中使用后端返回的URL拼接域名。代码示例展示了如何通过uni.chooseMedia()选择视频并上传,确保视频大小不超过20MB,并处理上传成功后的响应。参考微
·
1.碰到问题
工单里面上传完视频video组件ios无法播放视频,安卓可以
2.原因
使用了后台接口返回的url拼域名 , 正确做法:使用wx.chooseMedia()里面的tempFilePath(本地临时文件路径 (本地路径)),上传好了详情可以使用后台返回的url拼域名
3.根本原因
后端返回的url请求ios好像对视频的大小要知道(ios的video如果播放不出来一般是后端处理的问题,让他们改)
4.代码
/*上传视频*/
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);
},
});
},
5.参考文档
微信小程序文档
6.效果
更多推荐




所有评论(0)