小程序开发上传视频教程

2018-05-18 17:28

摘要:对于小程序上传视频,重点在于小程序组件和API,上传视频和图片思路相同。

对于小程序上传视频,重点在于小程序组件和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记录后,小程序可以拿到此刻photoid,接下来我们上传视频。

在上传之前我们研究下如何选择和拍摄视频。

在视频这块微信小程序提供了2API

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、durationsizewidthheight


总之我们通过上面的方法将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记录返回小程序后上传具体文件。

这里先说明一点就是上传视频和上传图片思路一样,只是因为视频体积偏大,每次我们设定上传一个。


推荐阅读:如何删除小程序开发者工具中失效项目    微信小程序开发教程 


参与讨论

发表评论

扫码添加专属客服即可随时咨询

还可领取小程序推广攻略

咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部