文件上传重复提示vue和springboot代码

Vue前端代码：

<template>
  <div>
    <input type="file" @change="uploadFile">
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append("file", file);
      axios.post("/api/upload", formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

Spring Boot后端代码：

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

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        String fileName = file.getOriginalFilename();
        File tempFile = new File(fileName);
        try {
            file.transferTo(tempFile);
            // 处理上传文件
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("上传失败");
        }
        return ResponseEntity.ok("上传成功");
    }
}

在Vue中使用`<input type="file">`标签选择文件后，通过axios将文件发送到后端的`/api/upload`接口。Spring Boot后端的`UploadController`接收到文件后，可以对文件进行处理并返回上传结果。如果上传成功，前端将会在控制台打印出响应数据。