第6章：上传视频业务流程开发（6-1 上传短视频业务流程图 —6-14 小程序端上传短视频联调）
本文共 14083 字，大约阅读时间需要 46 分钟。
学习目标：
6-1 上传短视频业务流程图 6-2 用户选择视频 6-3 选择背景音乐页面讲解 6-10 开发后台bgm列表接口 6-11 bgm页面联调获取背景音乐列表 6-12 开发上传短视频接口，完善swagger测试上传 6-13 视频临时参数传入下一个页面 6-14 小程序端上传短视频联调
学习内容：
6-1 上传短视频业务流程图
6-2 用户选择视频
使用微信API接口wx.chooseVideo(Object object)，本接口从基础库版本 1.9.6 起支持在小程序插件中使用，拍摄视频或从手机相册中选视频。
在mine.js页面中进行uploadVideo控件上传视频的函数编写：
uploadVideo:function(){ var me=this; wx.chooseVideo({ sourceType: ['album'], success(res) { console.log(res); var duration=res.duration; var tmpheight=res.height; var tmpwidth=res.width; var tmpVideoUrl=res.tempFilePath; var tmpCoverUrl=res.thumbTempFilePath; if(duration>11){ wx.showToast({ title: '视频长度不能超过10秒...', icon:"none", duration:2500 }) }else if(duration<1){ wx.showToast({ title: '视频长度不能小于1秒...', icon:"none", duration:2500 }) }else{ //打开选择BGM的页面 } } }) } 6-3 选择背景音乐页面讲解
1、新增背景音乐选择页面：
chooseBgm.wxss的代码如下：
page { height: 100%;} .container { display: flex; margin-top: 20rpx; justify-content: space-around; }.submitBtn { width: 80%; margin-top: 15px;}.gobackBtn { width: 80%; margin-top: 15px;}.loginLabel { color: gray; font-size: 15px;}.inputText { float: right; text-align: right; margin-right: 22px; margin-top: 11px; font-size: 15px;}.inputView { padding: 5px; background-color: white; line-height: 45px; border: solid 1px whitesmoke;} 编译后的页面如下：
上面使用的是微信官方audio音频组件：
首先在chooseBgm.wxml中添加组件：
然后在chooseBgm.js中添加Bgm的数据信息：
data: { poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', name: '此时此刻', author: '许巍', src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46', }, 编译运行之后发现歌曲无法播放：
或者可以使用功能更强的音频API构建一个自定义组件：（这里我先不管）
<iaudio>标签 
4）构建静态页面 6-10 开发后台bgm列表接口
1、首先新建Bgm列表接口及其实现类
BgmService.java代码如下：
package com.asayi.service;import java.util.List;import com.asayi.pojo.Bgm;public interface BgmService { /** * 查询背景音乐列表 */ public List queryBgmList(); } BgmServiceImpl.java代码如下：
package com.asayi.service.impl;import java.util.List;import org.n3r.idworker.Sid;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.asayi.mapper.AsayiUsersMapper;import com.asayi.mapper.BgmMapper;import com.asayi.pojo.AsayiUsers;import com.asayi.pojo.Bgm;import com.asayi.service.BgmService;import com.asayi.service.UserService;import tk.mybatis.mapper.entity.Example;import tk.mybatis.mapper.entity.Example.Criteria;@Servicepublic class BgmServiceImpl implements BgmService { @Autowired private BgmMapper bgmMapper; @Autowired private Sid sid; @Transactional(propagation = Propagation.SUPPORTS) @Override public List queryBgmList() { return bgmMapper.selectAll(); } } 2、新建Bgm的controller
BgmController.java的代码如下：
package com.asayi.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.asayi.service.BgmService;import com.asayi.utils.IMoocJSONResult;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;@RestController@Api(value = "背景音乐业务的接口",tags = { "背景音乐业务的controller"})@RequestMapping("/bgm")public class BgmController { @Autowired private BgmService bgmService; @ApiOperation(value = "获取背景音乐列表",notes = "获取背景音乐列表的接口") @PostMapping("/list") public IMoocJSONResult Hello() { return IMoocJSONResult.ok(bgmService.queryBgmList()); } } 3、运行测试：
可以拿出数据库中的bgm表中的数据。
6-11 bgm页面联调获取背景音乐列表
在chooseBgm.js里面添加页面联调获取背景音乐列表代码：
const app = getApp()Page({ data: { bgmList:[], serverUrl:"", }, onLoad: function () { var me=this; 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 }); } } }) }}) 最后进行编译运行，拿到歌曲的数据，并且可以在网页上播放，在手机端也可以进行播放。
6-12开发上传短视频接口，完善swagger测试上传
1、新建VedioController控制类
package com.asayi.controller;import java.io.File;import java.io.FileOutputStream;import java.io.InputStream;import org.apache.commons.io.IOUtils;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import com.alibaba.druid.util.StringUtils;import com.asayi.pojo.AsayiUsers;import com.asayi.utils.IMoocJSONResult;import io.swagger.annotations.Api;import io.swagger.annotations.ApiImplicitParam;import io.swagger.annotations.ApiImplicitParams;import io.swagger.annotations.ApiOperation;@RestController@Api(value = "视频相关业务的接口",tags = { "视频相关业务的controller"})@RequestMapping("/video")public class VideoController { @ApiOperation(value = "用户上传视频",notes = "用户上传视频的接口") @ApiImplicitParams({ @ApiImplicitParam(name = "userId",value = "用户id",required = true, dataType = "String",paramType = "query"), @ApiImplicitParam(name = "bgmId",value = "背景音乐id",required = false, dataType = "String",paramType = "query"), @ApiImplicitParam(name = "videoSeconds",value = "背景音乐播放长度",required = true, dataType = "double",paramType = "query"), @ApiImplicitParam(name = "videoWidth",value = "视频宽度",required = true, dataType = "int",paramType = "query"), @ApiImplicitParam(name = "videoHeight",value = "视频高度",required = true, dataType = "int",paramType = "query"), @ApiImplicitParam(name = "desc",value = "视频描述",required = false, dataType = "String",paramType = "query") }) @PostMapping("/upload") public IMoocJSONResult uploadFace(String userId, String bgmId,double videoSeconds,int videoWidth,int videoHeight, String desc,@RequestParam("file") MultipartFile files) throws Exception { if(StringUtils.isEmpty(userId)) { return IMoocJSONResult.errorMsg("用户id不能为空..."); } //文件保存的命名空间 String fileSpace="F:/武汉理工风景/大四上/毕业设计/user_videos_dev"; //保存到数据库中的相对路径 String uploadPathDB="/"+userId+"/video"; FileOutputStream fileOutputStream=null; InputStream inputStream=null; try { if (files!=null) { String fileName=files.getOriginalFilename(); if(!StringUtils.isEmpty(fileName)) { //文件上传的最终保存路径 String finalVideoPath=fileSpace+uploadPathDB+"/"+fileName; //设置数据库保存的路径 uploadPathDB+=("/"+fileName); File outFile=new File(finalVideoPath); if(outFile.getParentFile()!=null||!outFile.getParentFile().isDirectory()) { //创建父文件夹 outFile.getParentFile().mkdirs(); } fileOutputStream=new FileOutputStream(outFile); inputStream=files.getInputStream(); IOUtils.copy(inputStream, fileOutputStream); } }else { return IMoocJSONResult.errorMsg("上传出错..."); } } catch (Exception e) { e.printStackTrace(); return IMoocJSONResult.errorMsg("上传出错..."); }finally { if(fileOutputStream!=null) { fileOutputStream.flush(); fileOutputStream.close(); } } return IMoocJSONResult.ok(); } } 2、最后使用swagger2测试：
更改后的VideoController.java的代码如下：
package com.asayi.controller;import java.io.File;import java.io.FileOutputStream;import java.io.InputStream;import org.apache.commons.io.IOUtils;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import com.alibaba.druid.util.StringUtils;import com.asayi.pojo.AsayiUsers;import com.asayi.utils.IMoocJSONResult;import io.swagger.annotations.Api;import io.swagger.annotations.ApiImplicitParam;import io.swagger.annotations.ApiImplicitParams;import io.swagger.annotations.ApiOperation;import io.swagger.annotations.ApiParam;@RestController@Api(value = "视频相关业务的接口",tags = { "视频相关业务的controller"})@RequestMapping("/video")public class VideoController { @ApiOperation(value = "用户上传视频",notes = "用户上传视频的接口") @ApiImplicitParams({ @ApiImplicitParam(name = "userId",value = "用户id",required = true, dataType = "String",paramType = "query"), @ApiImplicitParam(name = "bgmId",value = "背景音乐id",required = false, dataType = "String",paramType = "query"), @ApiImplicitParam(name = "videoSeconds",value = "背景音乐播放长度",required = true, dataType = "double",paramType = "query"), @ApiImplicitParam(name = "videoWidth",value = "视频宽度",required = true, dataType = "int",paramType = "query"), @ApiImplicitParam(name = "videoHeight",value = "视频高度",required = true, dataType = "int",paramType = "query"), @ApiImplicitParam(name = "desc",value = "视频描述",required = false, dataType = "String",paramType = "query") }) @PostMapping(value = "/upload" , headers="content-type=multipart/form-data") public IMoocJSONResult uploadFace(String userId, String bgmId,double videoSeconds,int videoWidth,int videoHeight, String desc, @ApiParam(value = "短视频",required = true)//必须要选择文件才能通过接口 MultipartFile file) throws Exception { if(StringUtils.isEmpty(userId)) { return IMoocJSONResult.errorMsg("用户id不能为空..."); } //文件保存的命名空间 String fileSpace="F:/武汉理工风景/大四上/毕业设计/user_videos_dev"; //保存到数据库中的相对路径 String uploadPathDB="/"+userId+"/video"; FileOutputStream fileOutputStream=null; InputStream inputStream=null; try { if (file!=null) { String fileName=file.getOriginalFilename(); if(!StringUtils.isEmpty(fileName)) { //文件上传的最终保存路径 String finalVideoPath=fileSpace+uploadPathDB+"/"+fileName; //设置数据库保存的路径 uploadPathDB+=("/"+fileName); File outFile=new File(finalVideoPath); if(outFile.getParentFile()!=null||!outFile.getParentFile().isDirectory()) { //创建父文件夹 outFile.getParentFile().mkdirs(); } fileOutputStream=new FileOutputStream(outFile); inputStream=file.getInputStream(); IOUtils.copy(inputStream, fileOutputStream); } }else { return IMoocJSONResult.errorMsg("上传出错..."); } } catch (Exception e) { e.printStackTrace(); return IMoocJSONResult.errorMsg("上传出错..."); }finally { if(fileOutputStream!=null) { fileOutputStream.flush(); fileOutputStream.close(); } } return IMoocJSONResult.ok(); } } 此时可以进行选择了：
返回值如下：
并且可以在本地文件夹看到上传的视频：
6-13 视频临时参数传入下一个页面
1、在mine.js中打开选择BGM的页面
//打开选择BGM的页面 wx.navigateTo({ url: '../chooseBgm/chooseBgm?duration='+duration +"&tmpheight="+tmpheight +"&tmpwidth="+tmpwidth +"&tmpVideoUrl="+tmpVideoUrl +"&tmpCoverUrl="+tmpCoverUrl }) 2、在chooseBgm.js中对上传视频控件绑定事件upload进行响应
upload:function(e){ var me=this; var bgmId=e.detail.value.bgmId; var desc=e.detail.value.desc; console.log("bgmId:"+bgmId); console.log("desc:"+desc); } 3、测试输出bgmId和描述：
6-14 小程序端上传短视频联调
在chooseBgm.js中对上传视频控件绑定事件upload进行响应
upload:function(e){ var me=this; var bgmId=e.detail.value.bgmId; var desc=e.detail.value.desc; console.log("bgmId:"+bgmId); console.log("desc:"+desc); var duration=me.data.videoParams.duration; var tmpheight=me.data.videoParams.tmpheight; var tmpwidth=me.data.videoParams.tmpwidth; var tmpVideoUrl=me.data.videoParams.tmpVideoUrl; //上传短视频 wx.showLoading({ title: '上传中...', }) var serverUrl=app.serverUrl; wx.uploadFile({ url: serverUrl+'/video/upload', formData:{ userId:app.userInfo.id, bgmId:bgmId, desc:desc, videoSeconds:duration, videoHeight:tmpheight, videoWidth:tmpwidth }, filePath: tmpVideoUrl, name: 'file', header:{ 'content-type':'application/json'//默认值 }, success (res){ // var data = JSON.parse(res.data); console.log(res); wx.hideLoading(); if(res.status==200){ wx.showToast({ title: '上传成功！', icon:"success" }); } } }) } 调试后上传成功：
转载地址：http://rnrp.baihongyu.com/
你可能感兴趣的文章
Mysql 常见错误
查看>>
mysql 常见问题
查看>>
MYSQL 幻读（Phantom Problem）不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
查看>>
MySQL 快速创建千万级测试数据
查看>>
mysql 快速自增假数据， 新增假数据，mysql自增假数据
查看>>
MySql 手动执行主从备份
查看>>
Mysql 批量修改四种方式效率对比（一）
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错：Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示：Communication link failure
查看>>
mysql 插入是否成功_PDO mysql：如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件：脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择？快来看看性能测试吧
查看>>