记vue+elementUI+springBoot上传文件时因日志切面引起的错误

在写上传文件接口时使用了element自带的上传组件,但是在传文件到后端时莫名报错,经过排查发现是日志切面打印时出了问题。

一、上传组件代码:

<template>
  <div>
    <el-upload class="upload-demo" drag :action="uploadFile()">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处,或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只能上传pdf文件,且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      bfile: []
    }
  },
  methods: {
    // 上传文件
    uploadFile: function() {
      return 'http://localhost:8081/file/upload'
    }

  }
}
</script>
<style scoped>
</style>
    

二、后端代码

@RestController
@CrossOrigin
@RequestMapping(value = "/file")
@Slf4j
public class FileController {
	@ApiLog
    @PostMapping("/upload")
    String uploadFile(MultipartFile file) {
    	return "成功";
    }
}

三、日志切面出错代码

log.info("Request Args       : " + new Gson().toJson(proceedingJoinPoint.getArgs()));

出错原因:MultipartFile文件无法转成JSON串

四、修改后代码,遇到MultipartFile对象跳过转换JSON

if ("StandardMultipartFile".equals((proceedingJoinPoint.getArgs())[0].getClass().getSimpleName())) {
            log.info("Request Object       : " + (proceedingJoinPoint.getArgs())[0].getClass().getName());
        }else {
            log.info("Request Args       : " + new Gson().toJson(proceedingJoinPoint.getArgs()));
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue.js和Element UI来实现前端界面,使用Spring Boot来处理后端逻辑来实现文件模板的上传和下载功能。 首先,你可以创建一个Vue组件来处理文件上传和下载的界面。可以使用Element UI中的Upload组件来实现文件上传功能,使用Button组件来实现文件下载功能。在上传组件中,你可以设置上传的文件类型和大小限制,并在上传成功后获取到文件的URL或者其他信息。 接下来,在后端使用Spring Boot来处理上传和下载的逻辑。你可以创建一个Controller来处理文件上传和下载的请求。在文件上传的方法中,你可以使用MultipartFile来接收上传的文件,并将其保存到服务器上的某个目录中。在文件下载的方法中,你可以根据传入的文件名或者其他标识,从服务器上读取相应的文件,并将其以流的形式返回给前端。 以下是一个简单的示例代码: 前端(Vue.js + Element UI): ```vue <template> <div> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" > <el-button type="primary">点击上传</el-button> </el-upload> <el-button type="primary" @click="downloadTemplate">下载模板</el-button> </div> </template> <script> export default { methods: { handleSuccess(response) { // 处理上传成功后的逻辑 console.log(response); }, beforeUpload(file) { // 设置上传文件的类型和大小限制 const fileType = file.type; const fileSize = file.size / 1024 / 1024; // MB const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; // 允许的文件类型 const maxFileSize = 10; // 允许的最大文件大小,单位:MB if (!allowedTypes.includes(fileType)) { this.$message.error('只能上传pdf、doc或docx格式的文件'); return false; } if (fileSize > maxFileSize) { this.$message.error(`文件大小超过了${maxFileSize}MB`); return false; } return true; }, downloadTemplate() { // 处理下载模板的逻辑 window.location.href = '/api/download'; }, }, }; </script> ``` 后端(Spring Boot): ```java @RestController @RequestMapping("/api") public class FileController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { // 处理文件上传逻辑 // 可以将上传的文件保存到服务器上的某个目录中 return "上传成功"; } @GetMapping("/download") public void downloadTemplate(HttpServletResponse response) { // 处理文件下载逻辑 // 根据文件名或者其他标识,从服务器上读取相应的文件,并将其以流的形式返回给前端 String fileName = "template.docx"; // 下载的文件名 String filePath = "/path/to/template.docx"; // 文件在服务器上的路径 try { File file = new File(filePath); InputStream inputStream = new FileInputStream(file); response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8")); IOUtils.copy(inputStream, response.getOutputStream()); response.flushBuffer(); } catch (Exception e) { e.printStackTrace(); } } } ``` 这是一个简单的示例,你可以根据自己的需求进行进一步的调整和优化。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值