mui上传视频和上传本地视频，后台是java的springMVC

最新推荐文章于 2021-02-03 14:32:29 发布

置顶杨菜鸟

最新推荐文章于 2021-02-03 14:32:29 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： mui HTML5+ 文章标签： mui HTML5+

本文链接：https://blog.youkuaiyun.com/weixin_40129167/article/details/88699500

mui HTML5+ 专栏收录该内容

1 篇文章

订阅专栏

博主因网上难寻视频上传方法，将自己找到的方法整合。文档给出了基于mui和HTML5+的视频上传代码，包含HTML的按钮设置、JS的录像和相册选择逻辑，以及Java的后台上传处理，方便后续遇到问题时快速解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上找了很久找不到上传视频的方法，这里找了把自己找了那么多的方法结合起来吧，也为了以后自己遇到这个问题能够快速解决，第一次写文档，望各路大神见谅。

直接正文开始

html

<ul id="videos" class="mui-table-view mui-grid-view">

<li id="video" type="button" class="mui-btn mui-icon mui-icon-plusempty" style="font-size: 50px; "></li>

</ul>

这就是一个简单的mui按钮

document.getElementById('video').addEventListener('tap', function(){
       if (mui.os.plus) {
       var a = [{
       title: "录像"
       }, {
       title: "从手机相册选择"
       }];
       plus.nativeUI.actionSheet({
       title: "上传图片",
       cancel: "取消",
       buttons: a
       }, function(b) { /*actionSheet 按钮点击事件*/
       switch (b.index) {
       case 0:
       break;
       case 1:
       getVideo(); /*录像*/
       break;
       case 2:
       galleryVideo();/*打开相册找录像*/
       break;
       default:
       break;
       }
       })
       }
       }, false);

       /*这是打开录像的事件*/
       function getVideo(){
           var cmr = plus.camera.getCamera();
           var res = cmr.supportedVideoResolutions[0];//获取支持的分辨率，拿默认的第一个
           var fmt = cmr.supportedVideoFormats[0];//获取支持的录像文件格式，拿默认的第一个
           cmr.startVideoCapture( function( e ){//录像成功后会返回一个路径到e这里
                   plus.io.resolveLocalFileSystemURL(e, function(entry){//这个是根据路径读取文件信息，其实这步可以省略。
                       uploadVideo(e);
                   }, function(e){
                       console.log("读取录像文件错误：" + e.message);
                   });
           },function( error ) {
                   mui.toast("取消录制");
               },
               {resolution:res,format:fmt}
           );
       }

       function uploadVideo(file){
           //第二个参数一定要有，然后把文件路径扔进来
       var task=plus.uploader.createUpload(basePath+"/weChatEventController.do?upload", {processData: false, contentType: "multipart/form-data"}, function (t, status){
           if(status==200){
//               alert( "Upload success: " + t.url );
//               alert(t.responseText);
               var responseText = $.parseJSON(t.responseText);
               alert(responseText.obj);
               var filePath = "<input type=\"hidden\" name=\"filePath\" value=\""+responseText.obj+"\">";//文件地址
       jQuery("#videos").append(filePath);
               } else {
                   mui.toast("上传失败了。sorry，请重新来一遍");
               }
           });
           task.addFile( file, {key:"file"} );//这里是根据文件路径找到对应的文件,然后以file的参数名字扔给后台
           task.addData( "type", saveType );//这里是其他参数
           task.start();//开始上传
       }

       //本地相册选择
       function galleryVideo(){
       // 从相册中选择图片
       plus.gallery.pick( function(e){//打开相册后，回调的文件路径e
       uploadVideo(e);//选择视频
       }, function ( e ) {
       mui.toast( "您取消了选择录像" );
       },{
       filter: "video",//只打开视频，但是不知道为什么有其他选项
       system: false//不用系统自带的打开相册功能
       });
       }

java

/**
   * 上传
   *
   * @return
   */
   @RequestMapping(params = "upload")
   @ResponseBody
   public ResultJson upload(@RequestParam("file")CommonsMultipartFile file,String type,HttpServletRequest request,HttpServletResponse response) {
       ResultJson aj = new ResultJson();
try {
       log.info("uploading....");
if (ServletFileUpload.isMultipartContent(request)) {
   String fileInfo = getFileInfo(request, response, file,type);
   //转存文件
File uploadFile = new File(filePath);//路径


log.info("开始上传...");
FileUtils.copyInputStreamToFile(file.getInputStream(),
new File(uploadPath, fileName));//复制
log.info("文件上传完毕...");

file.transferTo(uploadFile);
   aj.setObj(fileInfo);
   log.info("upload completed!");
}
} catch (Exception e) {
e.printStackTrace();
}
return aj;
   }

上面的路径，自行修改。