本文共 5817 字，大约阅读时间需要 19 分钟。

小程序端代码

1、上传视频选中事件

1） wx.chooseVideo 是小程序中的视频选择API。

uploadVideo: function(){      var me = this;      //微信中选择视频的api      wx.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();    }}

转载地址：http://tjfoi.baihongyu.com/