功能⑤ 小程序视频上传

1 视频上传组件

// wxml文件
<!--上传视频组件-->
<view class='upload_warp_img'>
    <view class='img-preview-con' wx:for='{{videoList}}' wx:key="*this">
        <video src='{{item}}' class='img-preview-url' mode='widthFix' data-id='{{index}}' />
        <image src="/images/delImg.png" class='img-preview-del' data-id='{{index}}' catchtap="delVideo" />
    </view>
    <view class='add-content' wx:if='{{videoList.length < maxVideoNum}}'>
        <view class='add-img' catchtap="chooseVideo">
            <image src="/images/addImg.png" />
            <text>{{addText}}</text>
        </view>
    </view>
</view>
// js文件
Component({
    /**
     * 组件的属性列表
    */
    properties: {
        addText:{
        type:String,
        value:'上传相关证明' 
    },//提示文字
    maxVideoNum:{
        type:Number,
        value:2,
    },//最大可以选取视频数量
    videoList:{
        type:Array,
        value:[],//视频列表
    }
  },
  
    /**
     * 组件的初始数据
     */
    data: {
        videoList:[],
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /**
        * 拍摄或选择视频并上传服务器
        */
        chooseVideo: function () {
            let that = this
            let videoNum = that.properties.maxVideoNum - that.data.videoList.length;
            wx.chooseVideo({
                count: videoNum,
                sourceType: ['album', 'camera'],
                camera: 'back',
                compressed: true,
                success: function(res){
                    let videoUrls = res.tempFilePath//选择定视频的临时文件路径（本地路径）
                    let size = parseFloat(res.size/1024/1024).toFixed(1) //选定视频的数据量大小
                    if(parseFloat(size) > 100){
                        let beyondSize = parseFloat(size) - 100
                        wx.showToast({
                            title: '上传的视频大小超限，超出' + beyondSize + 'MB,请重新上传',
                            icon:'none'
                        })
                    }else{
                        let videoList = that.data.videoList
                        videoList.push(videoUrls);
                        that.setData({
                            videoList: videoList
                        })
                        that.triggerEvent("getVideoList", videoList)
                    }
                },
                fail: function() {
                    // fail
                },
                complete: function() {
                    // complete
                }
            })
        },

        //删除视频
        delVideo: function (e) {
            let that = this
            let index = e.currentTarget.dataset.id;
            wx.showModal({
                title: '提示',
                content: '确定要删除该视频吗？',
                showCancel: true,
                success: function (res) {
                    if (res.confirm) {
                        let videoList = that.data.videoList;
                        videoList.splice(index, 1);
                        that.setData({
                            videoList: videoList,
                        });
                        that.triggerEvent("delVideo", that.data.videoList)
                    }
                }
            })
        }
    },
})

2 使用该组件的页面js

// 提交视频信息
submitVideo() {
    let that = this
    let videoList = that.data.videoList
    let num = videoList.length
    let newVideoList = []
    for (var i = 0; i < num; i++) {
        if (!videoList[i].startsWith("http://192.168.67.41:82")) {
            that.setData({
                loadingTip: "上传视频中..."
            })
            that.dialog.showDialog()
            getApp().globalData.api.uploadPic(videoList[i], function (message, res) {
                that.dialog.hideDialog()
                if (res) {
                    var videoUrl = res.data
                    newVideoList.push(videoUrl)
                    if (newVideoList.length == num) {
                        that.setData({
                            videoList: newVideoList,
                            ['entInfo.videoList']: newVideoList
                        })
                        that.submitInfo() //提交企业信息
                    }
                }
            })
        } else {
            newVideoList.push(videoList[i])
            if (newVideoList.length == num) {
                that.setData({
                    videoList: newVideoList,
                    ['entInfo.videoList']: newVideoList
                })
                that.submitInfo() //提交企业信息
            }
        }
    }
},
/**
 * 获取视频
 */
getVideoList(e) {
    console.log(e)
    var videolist = e.detail
    this.setData({
        videoList: videolist
    })
    // this.compress(imglist)
},
/**
 * 删除视频
 */
delVideo(e) {
    console.log('删除后剩下的视频', e.detail)
    this.setData({
        videoList: e.detail,
        ['entInfo.videoList']: []
  })
},

/**
 * 上传图片
 */
function uploadPic(filePath, cb) {
    const uploadTask = wx.uploadFile({
        url: urlSet.upload,
        filePath: filePath,
        name: 'file',
        header: {
            "content-type": "multipart/form-data;",
            'Accept': 'application/json',
            "Authorization": wx.getStorageSync(common.CC_TICKET)
        },
        complete: function(res) {
            console.log("上传完成")
            console.log(res)
            var code = res.data.code;
            var msg = res.data.msg;
            //添加超时拦击判断
            if (util.checkTokenInvalid(code)) {
                return typeof cb == "function" && cb("超时失败！", false);
            }
            var result = ""
            if (res.data != null && !Array.isArray(res.data)) {
                try {
                    result = JSON.parse(res.data)
                    code = result.code;
                    msg = result.msg;
                } catch (e) {
                    result = "{}"
                }
            }
            if (code != null && code == 0) {
                return typeof cb == "function" && cb("上传成功！", result)
            } else {
                return typeof cb == "function" && cb(msg ? msg : "上传失败", false)
            }
        },
        fail: function() {
            console.log("上传失败")
            return typeof cb == "function" && cb("上传失败", false)
        },
    })
    uploadTask.onProgressUpdate((res) => {
        event.emit(event.KUploadFileProgress, res.progress)
    })
}