vue实现文件上传，前后端

前端封装el-upload组件，父组件传值dialogVisible（用于显示el-dialog），子组件接收，并且关闭的时候返回一个值（用于隐藏el-dialog）,最多上传五个文件，文件格式为.jpg\pdf\png

后端接收

 @PostMapping("/upload")
    public AjaxResult upload(@RequestParam(value = "file") MultipartFile[] file)
    {
        try {
            String localPath = "";
            //1.1获取当前日期,当做本地磁盘的目录
            Date nowDate = DateUtils.getNowDate();
            String format = new SimpleDateFormat("YYYYMMDD").format(nowDate);
            String localPathPrefix = "C:\\"+format;
            for(MultipartFile f:file){
                // 获取文件名
                String fileName = f.getOriginalFilename();
                // 获取文件后缀
                String prefix = fileName.substring(fileName.lastIndexOf("."));
                // 保存文件到本地磁盘
                localPath = localPathPrefix+"\\"+fileName;
                File localFile = new File(localPath);
                if (!localFile.getParentFile().exists()) {
                    localFile.getParentFile().mkdirs();
                }
                //写入到本地磁盘
                f.transferTo(localFile);
                // 获取文件在本地磁盘上的路径
                String filePath = localFile.getAbsolutePath();
                log.info("文件名称："+fileName+"已经存入本地磁盘，全路径为："+filePath);

                //上传到文件服务器，自己掉接口

                //上传完成后，删除本地临时磁盘文件
                if (localFile.delete()) {
                    log.info(localFile.getName() + "已经删除");
                } else {
                    log.info("文件删除失败");
                }
            }
            //删除本次磁盘的日期目录
            File file1 = new File(localPathPrefix);
            if (file1.delete()) {
                log.info(file1.getName() + "已经删除");
            } else {
                log.info("文件删除失败");
            }

        }catch (Exception e){
            System.out.println(e);
            return error("上传失败");
        }
        return success("上传成功");
    }

效果展示