微信小程序[第十二篇] -- 上傳視頻

時間  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教程