微信小程序[第十二篇] -- 上传视频

时间  2019-11-11
标签 微信 程序 第十二 上传 视频 繁體版
原文   原文链接

经过上一篇的学习，咱们能够成功将宝宝的照片传到指定相册了，可是可爱的宝宝岂能只有照片，小视频必须同步跟上，莫问题！咱这篇就来一个视频上传的实现。javascript

俺家小核桃镇贴。php

哎呀妈，真好喝。

服务端

其实对于yii2程序而言，若是不考虑转码、获取帧等事情，上传图片和上传一个视频差异并不大，咱们仍是先来构造接口实现。html

考虑到在咱们的程序中视频和照片都是存储在photo_item表中，经过type字段加以区分，所以咱们仍然使用 /xcx/PhotoItemController这个控制器，可是create动做已经被上传图片使用了，无奈咱们须要自定义一个action，就叫它add吧。java

在yii2的restful中自定义路由方法git

首先在web.php里的urlManager进行设置github

//web.php
[
    'class' => 'yii\rest\UrlRule',
    'controller' => 'xcx/photo-item',
    'extraPatterns'=>[
        'POST add'=>'add',
    ]
],

设置后咱们来写实际的action，这里先说明一点就是上传视频和上传图片思路同样，只是由于视频体积偏大，每次咱们设定上传一个。web

思路：新建photo记录返回小程序后上传具体文件。小程序

对于新建photo记录不在说明，请参考上一篇文章，详细代码请你们参考github本项目仓库。微信小程序

// PhotoItemController.add
public function actionAdd(){
    $video = UploadedFile::getInstanceByName('file');
    $body = Yii::$app->getRequest()->getBodyParams();

    if($video == false){
        throw new Exception('文件上传失败');
    }

    $ext = $video->getExtension();
    $path_result = N8Folder::createItemPath('video',$ext);
    $video->saveAs($path_result['save_path']);

    $modelClass = $this->modelClass;
    $model = new $modelClass();
    $model->photo_id = $body['photo_id'];
    $model->album_id = $body['album_id'];
    $model->path = $path_result['web_path'];
    $model->type = 2;
    $model->save();

    return $model;
}

ok,服务端暂且到这里，接下来开始咱们小程序部署。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记录后，小程序能够拿到此刻photo的id，接下来咱们上传视频。

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

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

  • wx.chooseVideo 选择视频

  • wx.saveVideoToPhotosAlbum 保持视频到相册

在这里咱们使用第一个。

先贴出来官方文档 https://mp.weixin.qq.com/debu...

咱们首先在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内我添加了以下代码

<view class="video-box" wx:if="{{video}}">
    <video class="video" src="{{video}}"></video>
    <view style="text-align:center;color:green;font-size:14px;padding-top:7px;">当前视频大小为{{size}}M</view>
</view>

经过对video的判断来决定是否显示小视频预览，在这里咱们用了小程序的video组件，之后会详细说明。

咱们来看一下成果。

alt

效果还不错，如今流程顺了，咱们须要回过头来再去处理上面的formSubmit函数，有两件事情

  • 点击提交前对视频的判断

  • 生成photo记录后对视频的上传

判断

咱们判断两个参数，一个是必须选择，一个是尺寸不能大于2M

formSubmit: function (e) {
    var that = this;
    var desc = e.detail.value.desc;
    if (that.data.albumIndex < 0) {
        wx.showModal({
            title: '小乖猴助手',
            content: '请选择相册'
        })
        return;
    }
    var albumId = that.data.albums[that.data.albumIndex].id;

    if (that.data.video == false) {
        wx.showModal({
            title: '小乖猴助手',
            content: '请录制或选择一个小视频'
        })
        return false;
    }

    if (that.data.size > 1024 * 1024 * 2) {
        wx.showModal({
            title: '小乖猴助手',
            content: '很抱歉，视频最大容许2M，当前为' + (that.data.size / (1024 * 1024)).toFixed(2) + 'M'
        })
        return false;
    }

    .......
}

没什么难度，if而已。

接下来处理上传

当获取了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) {

                    }
                })
            }
        }
    });
}

ok,成功了

alt

总结

就这样，咱们轻松实现了视频上传功能，有上一篇作基础我想不少方法你已经很熟悉了吧，详细代码稍后会放到github上，你们能够拉下来看下。

https://github.com/abei2017/xgh

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程