小程序开发上传视频教程
对于小程序上传视频，重点在于小程序组件和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' =>'yiirestUrlRule',
'controller' =>'xcx/photo-item',
'extraPatterns'=>[
'POSTadd'=>'add',
]
],
思路：新建photo记录返回小程序后上传具体文件。
这里先说明一点就是上传视频和上传图片思路一样，只是因为视频体积偏大，每次我们设定上传一个。
推荐阅读：如何删除小程序开发者工具中失效项目 微信小程序开发教程
标签：
