【微信小程序】小程序项目之上传视频实践

人狠话不多，看代码。

wxml

    

      
            
        
        
          
            
              
              
            
          
          
            
            上传视频
          
          
        
      

    

wxss

.imageboxs{
  width: 100%;
  margin: 0 auto;
}
.image-list{
  display: -webkit-box;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.image-item{
  width: 145rpx;
  height: 145rpx;
  margin-right:26rpx;
  margin-bottom: 26rpx;
  float: left;
  position: relative;
}
.imageitemsd{
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
.delImg{
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  top: -18rpx;
  right: -18rpx;
}
.uploadImg{
  width: 145rpx;
  height: 145rpx;
  line-height: 200rpx;
  float:left;
  position:relative;
  margin-right:26rpx;
  margin-bottom:26rpx;
  background:rgba(246,247,248,1);
  border-radius:8px;
  border:1px dashed rgba(151,151,151,1);
  text-align: center;
  font-size:24rpx;
  font-weight:400;
  color:rgba(31,44,58,1);
}
.maxlengthTitle{
  height: 145rpx;
  line-height: 145rpx;
  float:left;
  position:relative;
  font-size:24rpx;
  font-weight:400;
  color:rgba(157,168,178,1)
}
.lingde{
  width: 100%;
  height: 2rpx;
  background: #e5e5e5;
  margin: 10rpx 0 30rpx;
}
.shangchuans{
  width: 44rpx;
  height: 44rpx;
  margin-bottom: 12rpx;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%,0);
}

js

Page({
    data:{
        videohouArr: [],  //后台返回视频数组
        videobenArr: [], //前台展示视频数组
    },
    //上传视频
  chooseVideo: function(e){
    var that = this;
    var videohouArr = that.data.videohouArr; //后台返回视频信息
    var videobenArr = that.data.videobenArr;//前端展示视频图片数组
    console.log(123)
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      compressed: true,
      camera: 'back',
      success: function (res) {
        console.log(res);
        
        var maxsize = Math.floor(res.size);
        var tempFilePath = res.tempFilePath;
        var formData = {
          user_id: app.globalData.uid,
          type: 'question',
        }
        if (videobenArr.length == 5){
          wx.showModal({
            title: '温馨提示',
            content: '最多上传5个视频',
            showCancel: false,
          })
        }else{
          if (maxsize > 52428800) {
            wx.showModal({
              title: '温馨提示',
              content: '文件过大，请限制在25M以内。',
              showCancel: false,
            })
          } else {
            videobenArr.push(res);
            wx.showLoading({
              title: '努力上传中...',
            })
            wx.uploadFile({
              url: config.DOMAIN_API.addVideo,
              filePath: tempFilePath,
              formData: formData,
              name: 'file',
              success: function (res) {

                var imgurl = JSON.parse(res.data).data;
                videohouArr.push(imgurl);
                console.log(videohouArr);
                console.log('上传成功', res, imgurl)
                wx.hideLoading();
                wx.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 1000
                })
                that.setData({
                  videobenArr: videobenArr,
                  videohouArr: videohouArr
                })
              },
              fail: function (errMsg) {
                wx.showModal({
                  title: '温馨提示',
                  content: '上传失败，请稍后重新上传。',
                  showCancel: false,
                });
                console.log(errMsg);
              }
            });
          }
        }
      },
      fail: function(e){
        console.log('选择视频失败')
      },
    })
  },
    //删除视频
  delVideo: function(e){
    var that = this;
    var index = e.currentTarget.dataset.index;
    var newVideoList = that.data.videohouArr;
    var houtaiDataVideo = that.data.videobenArr;
    for (var i in houtaiDataVideo) {
      if (index == i) {
        houtaiDataVideo.splice(i, 1);
        that.setData({
          videobenArr: houtaiDataVideo
        })
      }
    }
    for (var i in  newVideoList) {
      if (index == i) {
        newVideoList.splice(i, 1);
        that.setData({
          videohouArr: newVideoList
        })
      }
    }
  },
})

由于之前未写过这个功能，在网上查找也是未能找到好的解决方案。所以就只有自己摸索了。刚写完项目通过测试之后可以完美的实现上传视频，所以就迫不及待的来写CSDN分享于大家。由于项目比较急切删除视频功能代码还有待优化，后续会加上。嘿嘿嘿！