业务需求场景分析
需要客户上传自己拍摄的视频,时长限制为90s以内
实现过程分析
- 首先微信公众平台官方给出了上传视频的API wx.chooseVideo;
- 然后此时上传视频跟上传图片就略微不同了,此时上传图片是需要在success 事件中判断上传格式是否正确对吧;
- 但是上传视频手机端是没法选择图片的,哈哈……,电脑端的话如果选择图片,则直接跳转至fail函数,所以,此时判断格式是否正确的弹框应该写在fail事件中;
- 上传文件格式正确,然后跟上传图片流程又变得一样了,则发送请求获取policy参数;
- 对参数进行处理(文件名),然后发送请求至阿里云,url 为后台给的参数中的host参数;
- 如果 res.resultCode==200,代表上传成功
具体代码如下:
如有疑问,欢迎交流
chooseVideo(){
var that = this;
wx.chooseVideo({
count: 1, //选择多少个视频
sourceType: ['album', 'camera'], //视频来源相册和相机都可以
maxDuration: 30, //相机拍摄最大时长为30S
camera: 'back', //默认摄像头是后置摄像头
success(res) {
// 判断上传文件格式
let tempFilePaths = res.tempFilePath;
let n = tempFilePaths.lastIndexOf('.');
let type = tempFilePaths.substring(n);
let policyUrl = app.globalData.baseUrl + app.globalData.http.getOssInfo + "?memberId=" + wx.getStorageSync("memberId")
wx.request({
url: policyUrl, //获取oss签名
success: function (res) {
wx.showLoading({ title: '视频上传中' });
if (res.data.resultCode == 200) {
let post = res.data.data.info;
let foot1 = 'x-oss-process=image/resize,w_1080,h_1920,m_fill/watermark,type_d3F5LXplbmhlaQ,size_38,text_'
const aliyunFileKey = post.dir + "/" + post.fileName + type;
let showUrl = null;
wx.uploadFile({
url: post.host, //上传到OSS
filePath: tempFilePaths,
name: 'file',
formData: {
'key': aliyunFileKey,
'OSSAccessKeyId': post.accessKeyId,
'policy': post.policy,
'signature': post.signature,
'success_action_status': '200',
},
success: function (res) {
console.log("阿里云", res.statusCode)
if (res.statusCode == 200) {
wx.hideLoading()
wx.showToast({
title: '上传成功',
icon: 'success',
duration: 1200
})
showUrl = post.host + '/' + aliyunFileKey
that.setData({
video: showUrl
});
console.log(showUrl)
} else {
wx.showToast({
title: '上传失败!',
icon: 'none',
duration: 1200
})
}
}
})
}
}
})
},
fail(res){
wx.showModal({
content: '视频格式不正确,请重新选择',
showCancel: false
})
}
})
},