【java小程序】小程序视频上传文件的前后端代码

文章目录

• • 小程序端代码
  • • • 1、上传视频选中事件
      • 2、背景音乐的页面加载
  • 上传文件的后端代码

小程序端代码

1、上传视频选中事件

1） wx.chooseVideo 是小程序中的视频选择API。
2）选中视频success返回视频的长度、高度、宽度、临时地址、临时封面图等
3） wx.navigateTo 进行页面跳转的API，将视频数据传递到背景音乐选择页。

  uploadVideo: function(){var me = this;//微信中选择视频的apiwx.chooseVideo({sourceType:['album','camera'],success:function (res){console.log(res);//获取视频的时间var duration = res.duration;//获取图片的高var height = res.height;//获取图片的宽var width = res.width;//获取视频的临时地址var tmpVideoUrl = res.tempFilePath;//获取视频的临时封面var tmpCoverUrl = res.thumbTempFilePath;if (duration > 16){wx.showToast({title: '视频长度不能超过15秒...',icon:"none",duration:2500})} else if (duration < 2){wx.showToast({title: '视频太短,不能上传',icon:"none",duration: 2500})} else {//打开选择bgm（背景音乐）的页面wx.navigateTo({url:'../choosebgm/choosebgm?duration=' + duration+ "&tmpHeight=" + height+ "&tmpWidth=" + width+ "&tmpVideoUrl=" + tmpVideoUrl+ "&tmpCoverUrl=" + tmpCoverUrl})}}})}

2、背景音乐的页面加载

点击此处查看选择背景音乐的相关页面渲染代码，这里只对上传事件请求进行阐述。

1. onLoad 页面第一次加载的时候执行函数。
   2）通过参数params，获取视频传递过来的数据，并进行data设置，方便使用

 onLoad: function(params) {var me = this;console.log(params);me.setData({videoParams: params})
}

3. 上传视频事件，wx.uploadFile 小程序提供的上传文件api
   4）formData 后台传递的数据。
4. name 属性的值，要和后台接收的值要一样。

  upload: function(e) {var me = this;var bgmId = e.detail.value.bgmId;var desc = e.detail.value.desc;var duration = me.data.videoParams.duration;//获取图片的高var tmpHeight = me.data.videoParams.tmpHeight;//获取图片的宽var tmpWidth = me.data.videoParams.tmpWidth;//获取视频的临时地址var tmpVideoUrl = me.data.videoParams.tempFilePath;//获取视频的临时封面地址var tmpCoverUrl = me.data.videoParams.thumbTempFilePath;//上传短视频wx.showLoading({title: '上传中...',})var serverUrl = app.serverUrl;wx.uploadFile({url: serverUrl + '/video/upload?userId=' + app.userInfo.id,formData:{userId : app.userInfo.id,bgmId: bgmId,desc: desc,videoSeconds: duration,videoHeight: tmpHeight,videoWidth: tmpWidth},filePath: tmpVideoUrl,name: 'files',header:{'content-type':'application/json'},success:function (res) {wx.hideLoading();if(res.data.status == 200){wx.showToast({title: '上传成功！',icon:"success"})}}})}

上传文件的后端代码

1） swagger 接口当有多个参数时，需要使用 @ApiImplicitParams 将 @ApiImplicitParam多个注解括起来。

@Api(value = "视频相关业务接口", tags = {"视频相关业务的controller"})
@RestController
@RequestMapping("/video")
public class VideoController extends BasicController {@ApiOperation(value="上传视频", notes = "上传视频的接口")@ApiImplicitParams({@ApiImplicitParam(name = "userId",value="用户id",required = true,dataType = "String", paramType = "form"),@ApiImplicitParam(name = "bgmId",value="背景音乐id",required = false,dataType = "String", paramType = "form"),@ApiImplicitParam(name = "videoSeconds",value="上传视频播放长度",required = true,dataType = "double", paramType = "form"),@ApiImplicitParam(name = "videoWidth",value="上传视频的宽度",required = true,dataType = "int", paramType = "form"),@ApiImplicitParam(name = "videoHeight",value="上传视频的高度",required = true,dataType = "int", paramType = "form"),@ApiImplicitParam(name = "desc",value="上传视频的描述",required = false,dataType = "String", paramType = "form")})@PostMapping(value = "/upload", headers = "content-type=multipart/form-data")public IMoocJSONResult upload(String userId, String bgmId, double videoSeconds,int videoWidth, int videoHeight, String desc,@ApiParam(value = "短视频",required = true) MultipartFile files){if(StringUtils.isBlank(userId)) {return IMoocJSONResult.errorMsg("用户id不能为空");}//保存文件的路径String fileSpace = "G:\\imooc-video-dev";//保存到数据库的相对路径String uploadPathDB = "\\" + userId + "\\video";FileOutputStream fileOutputStream = null;InputStream inputStream = null;try {if(files != null ) {String fileNmae = files.getOriginalFilename();if (StringUtils.isNotBlank(fileNmae)) {//文件上传的最终保存路径String finalVideoPath = fileSpace + uploadPathDB + "\\" + fileNmae;//数据库最终保存的相对路径uploadPathDB += ("\\" + fileNmae);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) {return  IMoocJSONResult.errorMsg("上传出错");} finally {try{if(fileOutputStream !=null ){fileOutputStream.flush();fileOutputStream.close();}} catch(IOException e){return IMoocJSONResult.errorMsg("上传出错");}}return IMoocJSONResult.ok();}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！