springboot VUE实现文件上传

如何实现SpringBoot+Vue文件上传？

文件上传涉及前端和后端两个方面的实现。

前端的Vue代码：

1. 定义上传文件的模板：

<template>
  <div>
    <input type="file" @change="handleFileUpload" ref="fileUpload">
    <button @click="submitFile">上传文件</button>
  </div>
</template>

2. 在Vue的methods中添加上传文件的方法：

methods: {
  handleFileUpload () {
    this.file = this.$refs.fileUpload.files[0]
  },
  submitFile () {
    let formData = new FormData()
    formData.append('file', this.file)
    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then(response => {
        console.log(response.data)
      })
  }
}

这个方法中，我们通过FormData对象来将文件对象上传到服务器端。需要注意的是，在axios请求中，我们需要指定Content-Type为multipart/form-data，以便后端能够正确地解析上传的文件。

后端的SpringBoot代码：

1. 配置文件上传的Multipart配置

在application.properties文件中添加以下配置：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

这个配置指定了上传文件的大小限制，例如，上限设置为10MB。

2. 添加文件上传的Controller

@RestController
@RequestMapping("/api")
public class FileUploadController {

  @PostMapping("/upload")
  public String uploadFile(@RequestParam("file") MultipartFile file) {
    try {
      // 将上传的文件保存到指定路径下
      String filePath = "C:/uploads/" + file.getOriginalFilename();
      file.transferTo(new File(filePath));
      return "文件上传成功";
    } catch (IOException e) {
      e.printStackTrace();
      return "文件上传失败";
    }
  }
}

这个Controller中，通过@RequestParam注解来指定上传的文件参数名，再通过MultipartFile来获取上传的文件。最后，将文件保存到指定的路径下。需要注意的是，保存路径需要在业务中合理设置。

至此，SpringBoot+Vue文件上传的实现就完成了。