小北微信小程序教程之-- 上傳視頻

發(fā)布時間：2018-04-25 10:48 所屬欄目：小程序開發(fā)教程

服務(wù)端

其實對于yii2程序而言，如果不考慮轉(zhuǎn)碼、獲取幀等事情，上傳圖片和上傳一個視頻差別并不大，我們還是先來構(gòu)造接口實現(xiàn)。

考慮到在我們的程序中視頻和照片都是存儲在photo_item表中，通過type字段加以區(qū)分，因此我們?nèi)匀皇褂?/xcx/PhotoItemController這個控制器，但是create動作已經(jīng)被上傳圖片使用了，無奈我們需要自定義一個action，就叫它add吧。

在yii2的restful中自定義路由方法

首先在web.php里的urlManager進(jìn)行設(shè)置

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

設(shè)置后我們來寫實際的action，這里先說明一點就是上傳視頻和上傳圖片思路一樣，只是因為視頻體積偏大，每次我們設(shè)定上傳一個。

思路：新建photo記錄返回小程序后上傳具體文件。

對于新建photo記錄不在說明，請參考上一篇文章，詳細(xì)代碼請大家參考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,服務(wù)端暫且到這里，接下來開始我們小程序部署。

小程序

作為一套入門級實戰(zhàn)教程，我們的重點在于小程序組件和api的講解，因此對于上傳視頻我仍然采用和上傳照片完全一致的思路，看下圖。

在這里我們要做如下事情

選擇或拍攝視頻并判斷是否符合標(biāo)準(zhǔn)
上傳視頻

第一步生成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) {

        }
    });
}

當(dāng)我們通過上面方法成功新建photo記錄后，小程序可以拿到此刻photo的id，接下來我們上傳視頻。

在上傳之前我們研究下如何選擇和拍攝視頻。

在視頻這塊微信小程序提供了2個API

wx.chooseVideo 選擇視頻
wx.saveVideoToPhotosAlbum 保持視頻到相冊

在這里我們使用第一個。

先貼出來官方文檔 https://mp.weixin.qq.com/debu...

我們首先在data里設(shè)置了一個video字段用來表示選擇視頻的路徑，然后在wxml里設(shè)置了一個text點擊后觸發(fā)函數(shù)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可以設(shè)置拍攝和選擇已經(jīng)存在的視頻兩個屬性，maxDuration來限制拍攝時長。

關(guān)于chooseVideo成功后的返回還是蠻多的，一共5項
tempFilePath、duration、size、width、height。

總之我們通過上面的方法將video設(shè)置了選擇視頻的路徑，為了體驗好點，在視圖wxml內(nèi)我添加了如下代碼

<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;">當(dāng)前視頻大小為{{size}}M</view>
</view>

通過對video的判斷來決定是否顯示小視頻預(yù)覽，在這里我們用了小程序的video組件，以后會詳細(xì)說明。

我們來看一下成果。

效果還不錯，現(xiàn)在流程順了，我們需要回過頭來再去處理上面的formSubmit函數(shù)，有兩件事情

點擊提交前對視頻的判斷
生成photo記錄后對視頻的上傳

判斷

我們判斷兩個參數(shù)，一個是必須選擇，一個是尺寸不能大于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，當(dāng)前為' + (that.data.size / (1024 * 1024)).toFixed(2) + 'M'
        })
        return false;
    }

    .......
}

沒什么難度，if而已。

接下來處理上傳

當(dāng)獲取了photo記錄后，將視頻上傳上去，知道哪個函數(shù)了吧，對，就是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,成功了