vue springboot上传文件及回显

好的，请问您需要哪方面的帮助呢？

一般来说，vue可以使用axios或者fetch等ajax库发送文件请求，而springboot则可以使用Spring MVC的方式来处理上传文件请求。

上传文件的核心是FormData对象，可以使用它来构造包含文件数据的请求体。在vue中，我们可以使用如下代码来上传文件：

<template>
  <div>
    <input type="file" ref="file" @change="handleFileChange">
    <button @click="handleUpload">上传</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    handleFileChange() {
      // 获取文件对象
      this.file = this.$refs.file.files[0]
    },
    handleUpload() {
      // 构造FormData对象
      const formData = new FormData()
      formData.append('file', this.file)

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // 上传成功，处理回调
      })
      .catch(error => {
        // 上传失败，处理错误
      })
    }
  }
}
</script>

在上面的代码中，我们使用了input元素的type为file的属性来获取用户选择的文件，然后构造了一个含有文件数据的FormData对象，并使用axios库发送了post请求到服务器的/upload路径。注意需要设置请求头Content-Type为multipart/form-data。

在服务器端，我们可以使用Spring MVC中的MultipartFile类型来接收文件。一个简单的springboot上传文件的代码示例：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class FileController {

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            // 将文件保存到本地
            file.transferTo(new File("保存路径"));

            // 返回上传成功的消息
            return "上传成功！";
        } catch (IOException e) {
            // 返回上传失败的消息
            return "上传失败！";
        }
    }
}

在上面的代码中，我们使用了@PostMapping注解来接收POST请求，并使用@RequestParam注解来指定上传文件的参数名称。在方法内部，我们通过调用MultipartFile类型的transferTo方法来将文件保存到本地。注意需要处理文件保存失败的情况，并返回对应的消息。

至于如何将保存的文件回显到前端页面上，可以通过返回上传后的文件路径或者URL，并在前端页面上使用img或video等元素来显示文件。如果需要更加复杂的文件上传、处理、回显等操作，可以使用一些上传组件或者库来辅助完成。