对于小程序上传视频,重点在于小程序组件和API,上传视频和图片思路相同,如果不考虑转码、获取帧等事情,上传图片和上传一个视频差别并不大。小程序开发上传视频前要对小程序进行部署。
要完成这一系列步骤,第一步先要生成photo记录,代码如下:
formSubmit: function (e) {
var that = this;
var desc = e.detail.value.desc;
if(that.data.albumIndex < 0) {
wx.showToast({
title: \'请选择相册\',
})
return;
}
var albumId =that.data.albums[that.data.albumIndex].id;
wx.showLoading({title: \'提交中\' });
wx.request({
method: \'POST\',
data: {
album_id:albumId,
description:desc
},
url:\'http://xgh.local.com/xcx/photos\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},
success: function (res) {
}
});
}
当我们通过上面方法成功新建photo记录后,小程序可以拿到此刻photo的id,接下来我们上传视频。
在上传之前我们研究下如何选择和拍摄视频。
在视频这块微信小程序提供了2个API
wx.chooseVideo 选择视频
wx.saveVideoToPhotosAlbum 保持视频到相册
我们首先在data里设置了一个video字段用来表示选择视频的路径,然后在wxml里设置了一个text点击后触发函数addVideo来选择视频
// addVideo
addVideo: function () {
var that = this
wx.chooseVideo({
sourceType:[\'album\', \'camera\'],
maxDuration: 60,
camera: \'back\',
success: function(res) {
that.setData({
video:res.tempFilePath,
size: (res.size /(1024 * 1024)).toFixed(2)
})
}
})
},
通过sourceType可以设置 拍摄和选择已经存在的视频两个属性,maxDuration来限制拍摄时长。
关于chooseVideo成功后的返回还是蛮多的,一共5项
tempFilePath、duration、size、width、height。
总之我们通过上面的方法将video设置了选择视频的路径,为了体验好点,在视图wxml内我添加了如下代码
当前视频大小为{{size}}M
通过对video的判断来决定是否显示小视频预览,在这里我们用了小程序的video组件,以后会详细说明。效果图如下:
效果还不错,现在流程顺了,我们需要回过头来再去处理上面的formSubmit函数,有两件事情
点击提交前对视频的判断
生成photo记录后对视频的上传
判断
我们判断两个参数,一个是必须选择,一个是尺寸不能大于2M
接下来处理上传
当获取了photo记录后,将视频上传上去,使用uploadFile函数:
formSubmit: function (e) {
wx.request({
method: \'POST\',
data: {
album_id:albumId,
description:desc
},
url:\'http://xgh.local.com/xcx/photos\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},
success: function(res) {
if(res.statusCode == 201) {
var photo= res.data;
wx.showLoading({ title: \'视频上传中\' });
wx.uploadFile({
url:\'http://xgh.local.com/xcx/photo-items/add\',
method: \'POST\',
filePath: that.data.video,
header: {
\'content-type\': \'multipart/form-data\'
},
name:\'file\',
formData: {
photo_id: photo.id,
album_id: photo.album_id
},
success: function (r) {
wx.hideLoading();
wx.showModal({
title: \'小乖猴助手\',
content: \'上传成功\',
})
},
fail:function (r) {
}
})
}
}
});
}
在打开目录可以看到:
最后记得要在服务器端部署
在web.php里的urlManager进行设置
//web.php
[
\'class\' =>\'yii\\rest\\UrlRule\',
\'controller\' =>\'xcx/photo-item\',
\'extraPatterns\'=>[
\'POSTadd\'=>\'add\',
]
],
思路:新建photo记录返回小程序后上传具体文件。
这里先说明一点就是上传视频和上传图片思路一样,只是因为视频体积偏大,每次我们设定上传一个。
推荐阅读:如何删除小程序开发者工具中失效项目 微信小程序开发教程
参与讨论
发表评论