在这里我们要做如下事情

• 选择或拍摄视频并判断是否符合标准

• 上传视频

第一步 生成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内我添加了如下代码

<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组件，以后会详细说明。

我们来看一下成果。

效果还不错，现在流程顺了，我们需要回过头来再去处理上面的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,成功了

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