Java实现单文件上传，多文件上传，视频上传

1、JAVA实现单文件，多文件，视频上传后台接口代码

/**
    * @Description: 单文件/多文件 上传接口
    * @author: Orange
    * @Param:
    * @Return:
    * @Date: 2020/11/4 12:54
    */
    @ResponseBody
    @RequestMapping(value="/images")
    public ResponseData relgoodsimages(@RequestParam(value = "file", required = false) MultipartFile[] file, HttpServletRequest request, HttpSession session) throws IOException {

        JSONObject res = new JSONObject();
        JSONObject resUrl = new JSONObject();
        List<String> imageurls=new ArrayList<>();
        for (MultipartFile files:file){
            String filename = UUID.randomUUID().toString().replaceAll("-", "");
            String ext = FilenameUtils.getExtension(files.getOriginalFilename());
            String filenames = filename + "." + ext;
            //此行代码为获取当前项目所在盘符，为本项目封装方法，复制后不可用删除即可
            String fileParentPath = ConstantsContext.getBpmnFileUploadPath();
            String pathname = fileParentPath + filenames;
            File newFile = new File(pathname);
            files.transferTo(newFile);
            imageurls.add(filenames);
        }
        resUrl.put("src", imageurls);
        res.put("data", resUrl);

        return ResponseData.success(0, "上传成功", res);
    }



    /**
    * @Description: 上传视频接口
    * @author: Orange
    * @Param:
    * @Return:
    * @Date: 2020/11/4 12:51
    */
    @ResponseBody
    @RequestMapping("/video")
    public ResponseData relgoodsvideo(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {

        JSONObject res = new JSONObject();
        JSONObject resUrl = new JSONObject();
        String filename = UUID.randomUUID().toString().replaceAll("-", "");
        String fileParentPath = ConstantsContext.getBpmnFileUploadPath();
        String ext = FilenameUtils.getExtension(file.getOriginalFilename());
        String filenames = filename + "." + ext;
        String pathname = fileParentPath + filenames;
        File newFile = new File(pathname);
        file.transferTo(newFile);
        resUrl.put("src", filenames);
        res.put("msg", "");
        res.put("code", 0);
        res.put("data", resUrl);
        return ResponseData.success(0, "上传成功", res);


    }

2、前台js代码，前端框架所使用的是layUI

//单个图片上传
    upload.render({
        elem: '#pictureUrl'
        ,url: Feng.ctxPath + '/ledEnterpriseData/images' //改成您自己的上传接口 //改成您自己的上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        }
        ,done: function(res){
            //获得数据封装
            debugger;
            let dataList = [];
            dataList = res.data.data.src;

            for (let i = 0; i<dataList.length; i++){
                let tempUrl = dataList[i];
                LedEnterpriseDataInfoDlg.data.pictureUrl += tempUrl+',';
            }
            layer.msg('上传成功');
            console.log(res)
        }
    });

    //多图片上传
    upload.render({
        elem: '#certificateHonor'
        ,url: Feng.ctxPath +'/ledEnterpriseData/images' //改成您自己的上传接口
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            });
        }
        ,done: function(res){
            //获得数据封装
            let dataList2 = [];
            dataList2 = res.data.data.src;
            for (let i = 0; i<dataList2.length; i++){
                let tempUrl = dataList2[i];
                LedEnterpriseDataInfoDlg.data.certificateHonor += tempUrl+',';
            }
            //上传完毕
        }

    });
    //视频上传  <script src="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" type="text/javascript"></script>
    upload.render({
        elem: '#vedioUrl'
        ,url: Feng.ctxPath +'/ledEnterpriseData/video' //改成您自己的上传接口
        ,accept: 'video' //视频
        , size: 1024 * 400
        , exts: 'mp4'
        , progress: function (n) {
            var percent = n + '%'; //获取进度百分比
            layer.msg(percent, {
                icon: 16
                , shade: 0.01
            });
        } ,before: function(obj){
            //预读本地文件示例，不支持ie8
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#control_video_demo').attr('src', result); //图片链接（base64）
                $('#control_video_demo').css('display','block');
            });
        }