前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「小程序JAVA实战」小程序上传短视频(46)

「小程序JAVA实战」小程序上传短视频(46)

作者头像
IT架构圈
发布2019-07-08 10:04:35
2.3K0
发布2019-07-08 10:04:35
举报
文章被收录于专栏:IT架构圈

个人信息:用户上传短视频。源码:https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15

业务流程

  1. 用户选择视频(10秒限制),也可以通过摄像头拍摄
  2. 打开选择背景音乐。
  3. 可以选择音乐或者不选择输入视频的描述。
  4. controller 上传视频
  5. 保存视频的截图
  6. 用户是否选择背景音乐 7.1 是:直接保存视频 7.2 否:合并视频和背景音乐,保存视频

微信插件

官方介绍:https://developers.weixin.qq.com/miniprogram/dev/api/media-video.html#wxchoosevideoobject

  • 代码修改

可以获取到通过微信的组件获取到视频的长度,宽度,高度,视频的截图,视频的临时路径,时长。然后针对这些可以判断出来是否允许上传。

代码语言:javascript
复制
// pages/mine/mine.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    faceImage: "../../resource/images/noneface.png",
    nickname: "昵称",
    fansCounts: 0,
    followCounts: 0,
    receiveLikeCounts: 0,
  },
  /**
   * 用户注销
   */
  logout:function(e){
    var user = app.userInfo;
    wx.showLoading({
      title: '正在注销中。。。'
    });
    wx.request({
      url: app.serverUrl + "/logout?userId="+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        wx.hideLoading();
        if (status == 200) {
          wx.showToast({
            title: "用户注销成功~!",
            icon: 'none',
            duration: 3000
          })
          app.userInfo = null;
          wx.redirectTo({
            url: '../userRegister/userRegister',
          })

        } else if (status == 500) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 3000
          })
        }
      }
    })
  },
  /**
   * 头像上传
   */
  uploadFace:function(e){
    var user = app.userInfo;
    var me = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        if (tempFilePaths.length>0){
          console.log(tempFilePaths[0]);
              wx.uploadFile({
                url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例,非真实的接口地址
                filePath: tempFilePaths[0],
                name: 'file',
                success: function (res) {
                  var data = JSON.parse(res.data);
                  console.log(data);
                   wx.hideLoading();
                  if (data.status == 200) {
                    wx.showToast({
                      title: "用户上传成功~!",
                      icon: 'none',
                      duration: 3000
                    })
                    me.setData({
                      faceUrl: app.serverUrl+data.data
                    })


                  } else if (data.status == 500) {
                    wx.showToast({
                      title: data.msg,
                      icon: 'none',
                      duration: 3000
                    })
                  }
                }
              })
        }

      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var me = this;
    wx.showLoading({
      title: '正在获取用户信息。。。'
    });
    wx.request({
      url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        var userInfo = res.data.data;
        wx.hideLoading();
        var faceImage = me.data.faceUrl;
        if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
          faceImage = app.serverUrl +userInfo.faceImage;
        }
        me.setData({
          faceImage: faceImage,
          fansCounts: userInfo.fansCounts,
          followCounts: userInfo.followCounts,
          receiveLikeCounts: userInfo.receiveLikeCounts,
          nickname: userInfo.nickname
        })
      }
    })
  },

  uploadVideo:function(e){
    var me = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res);
        var tempDuration = res.duration;
        var tempHeight = res.height;
        var tempWidth = res.width;
        var tempSize = res.size;
        var tempFilePath = res.tempFilePath;
        var tempFilePath = res.thumbTempFilePath;
        if (tempDuration>20){
          wx.showToast({
            title: "视频太长了老铁不稳~",
            icon: 'none',
            duration: 3000
          })
        } else if (tempDuration <5){
          wx.showToast({
            title: "视频太短了不到5秒。老铁不稳~",
            icon: 'none',
            duration: 3000
          })
        } else{
          //进行上传
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
  • 增加选择背景音乐的界面

用户可以选择视频,接下来我们选择北京音乐的界面。用户选择音乐,或者用户可以不选择音乐直接提交不选择音乐直接提交。官方界面:https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

  • 新建页面
代码语言:javascript
复制
// pages/mine/mine.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    faceImage: "../../resource/images/noneface.png",
    nickname: "昵称",
    fansCounts: 0,
    followCounts: 0,
    receiveLikeCounts: 0,
  },
  /**
   * 用户注销
   */
  logout:function(e){
    var user = app.userInfo;
    wx.showLoading({
      title: '正在注销中。。。'
    });
    wx.request({
      url: app.serverUrl + "/logout?userId="+user.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        wx.hideLoading();
        if (status == 200) {
          wx.showToast({
            title: "用户注销成功~!",
            icon: 'none',
            duration: 3000
          })
          app.userInfo = null;
          wx.redirectTo({
            url: '../userRegister/userRegister',
          })

        } else if (status == 500) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 3000
          })
        }
      }
    })
  },
  /**
   * 头像上传
   */
  uploadFace:function(e){
    var user = app.userInfo;
    var me = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        if (tempFilePaths.length>0){
          console.log(tempFilePaths[0]);
              wx.uploadFile({
                url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例,非真实的接口地址
                filePath: tempFilePaths[0],
                name: 'file',
                success: function (res) {
                  var data = JSON.parse(res.data);
                  console.log(data);
                   wx.hideLoading();
                  if (data.status == 200) {
                    wx.showToast({
                      title: "用户上传成功~!",
                      icon: 'none',
                      duration: 3000
                    })
                    me.setData({
                      faceUrl: app.serverUrl+data.data
                    })


                  } else if (data.status == 500) {
                    wx.showToast({
                      title: data.msg,
                      icon: 'none',
                      duration: 3000
                    })
                  }
                }
              })
        }

      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var me = this;
    wx.showLoading({
      title: '正在获取用户信息。。。'
    });
    wx.request({
      url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var status = res.data.status;
        var userInfo = res.data.data;
        wx.hideLoading();
        var faceImage = me.data.faceUrl;
        if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
          faceImage = app.serverUrl +userInfo.faceImage;
        }
        me.setData({
          faceImage: faceImage,
          fansCounts: userInfo.fansCounts,
          followCounts: userInfo.followCounts,
          receiveLikeCounts: userInfo.receiveLikeCounts,
          nickname: userInfo.nickname
        })
      }
    })
  },

  uploadVideo:function(e){
    var me = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res);
        var tempDuration = res.duration;
        var tempHeight = res.height;
        var tempWidth = res.width;
        var tempSize = res.size;
        var tempFilePath = res.tempFilePath;
        var thumbTempFilePath = res.thumbTempFilePath;
        if (tempDuration>20){
          wx.showToast({
            title: "视频太长了老铁不稳~",
            icon: 'none',
            duration: 3000
          })
        } else if (tempDuration <5){
          wx.showToast({
            title: "视频太短了不到5秒。老铁不稳~",
            icon: 'none',
            duration: 3000
          })
        } else{
          wx.navigateTo({
            url: '../chooseBgm/chooseBgm?tempDuration=' + tempDuration
              + '&tempHeight=' + tempHeight
              + '&tempWidth=' + tempWidth
              + '&tempSize=' + tempSize
              + '&tempFilePath=' + tempFilePath
              + '&thumbTempFilePath=' + thumbTempFilePath
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

** chooseBgm.wxml

代码语言:javascript
复制
    <radio-group name="bgmId">      <block wx:for="{{bgmList}}">        <view class='container'>          <audio name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>        <radio style='margin-top:20px;' value='{{item.id}}'></radio>        </view>      </block>
    </radio-group>
    <view class="inputView">        <label class="loginLabel">视频描述:</label>        <input name="desc" class="inputText" placeholder="说点什么吧" />    </view>
    <!-- 提交 -->    <button class="submitBtn" type="primary" form-type='submit'>上传视频</button>
    <button class="gobackBtn" type="warn" form-type='reset'>重置</button></form>
代码语言:javascript
复制
chooseBgm.js

javascript const app = getApp()

Page({ data: { poster: 'http://y.gtimg.cn/music/photonew/T002R300x300M000003rsKF44GyaSk.jpg?maxage=2592000', name: '此时此刻', author: '许巍', src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46', serverUrl:"", videoParams:{} }, onLoad:function(params){ var me = this; console.log(params);

代码语言:javascript
复制
  me.setData({    videoParams:params  })
  wx.showLoading({    title: '请等待...',  });  var serverUrl = app.serverUrl;  // 调用后端  wx.request({    url: serverUrl + '/bgm/list',    method: "POST",    header: {      'content-type': 'application/json', // 默认值    },    success: function (res) {      console.log(res.data);      wx.hideLoading();      if (res.data.status == 200) {        var bgmList = res.data.data;        me.setData({          bgmList: bgmList,          serverUrl: serverUrl        });      } else if (res.data.status == 502) {        wx.showToast({          title: res.data.msg,          duration: 2000,          icon: "none",          success: function () {            wx.redirectTo({              url: '../userLogin/login',            })          }        });      }    }  })},

upload:function(e){ var me = this; var datasParams = me.data.videoParams; var bgmId = e.detail.value.bgmId; var desc = e.detail.value.desc; console.log("bgmId:"+bgmId); console.log("desc:" + desc); var tempDuration = datasParams.tempDuration; var tempHeight = datasParams.tempHeight; var tempWidth = datasParams.tempWidth; var tempSize = datasParams.tempSize; var tempFilePath = datasParams.tempFilePath; var thumbTempFilePath = datasParams.thumbTempFilePath; var userId = app.userInfo.id;

代码语言:javascript
复制
debugger;wx.showLoading({  title: '请等待...',});var serverUrl = app.serverUrl;// 调用后端

wx.uploadFile({ url: serverUrl + '/video/upload', filePath: tempFilePath, formData:{ userId: userId, bgmId: bgmId, videoSeconds: tempDuration, videoWidth: tempWidth, videoHeight: tempHeight, desc: desc, }, name: 'file', success:function(res){ console.log(res); wx.hideLoading(); }

}) } })

代码语言:javascript
复制
![](https://upload-images.jianshu.io/upload_images/11223715-e92552050f28267c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


### 后端开发>后端接口在一个服务器上,后端的web在一台服务器上。后端的web上传小程序,需要同步到后端接口所在的一个服务器上。我们选择zokeeper。后边会讲
* service中添加
BgmService.java

java

package com.idig8.service;

import java.util.List;

import com.idig8.pojo.Bgm;

public interface BgmService {

代码语言:javascript
复制
/** * 获取所有的Bgm列表 * @return */public List<Bgm> queryBgmList();

}

代码语言:javascript
复制
BgmServiceImpl.java

package com.idig8.service.Impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Propagation; import org.springframework.transaction.annotation.Transactional;

import com.idig8.mapper.BgmMapper; import com.idig8.pojo.Bgm; import com.idig8.service.BgmService;

@Service public class BgmServiceImpl implements BgmService {

代码语言:javascript
复制
@Autowiredprivate BgmMapper bgmMapper;

@Transactional(propagation =Propagation.SUPPORTS)@Overridepublic List<Bgm> queryBgmList(){
    return bgmMapper.selectAll();}

}

代码语言:javascript
复制
BgmController.java

java package com.idig8.controller;

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;

import com.idig8.service.BgmService; import com.idig8.utils.JSONResult;

import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation;

@RestController @Api(value="背景音乐接口",tags={"背景音乐接口的controller"}) @RequestMapping(value = "/bgm") public class BgmController extends BasicController{

代码语言:javascript
复制
@Autowiredprivate BgmService bgmService;


@ApiOperation(value="获取所有背景音乐",notes="通过获取所有背景音乐")@PostMapping("/list")public JSONResult list() {    return JSONResult.ok(bgmService.queryBgmList());}

}

```

接口已经在swagger验证通过。

小程序开发环境中会报net::ERRINSUFFICIENTRESOURCES这个错误,在真机中,不会出现该错误,忽略即可。

PS:通过个人页面传递视频信息,到开发新界面背景音乐和描述,最后到文件信息上传到后台功能已经开发完毕。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-01-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 业务流程
  • 微信插件
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档