SpringBoot+Vue实现文件上传功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了SpringBoot+Vue实现文件上传功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.后端代码部分：

2.前端代码部分

3.效果展示

1.后端代码部分：

@RestController
@RequestMapping("/file")
public class FileController {
    private final String UPLOAD_PATH = "D:/OBS/";//这里写上你需要上传的路径（模拟服务器）

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam MultipartFile file) {
        // ... File upload logic ...
        if (file.isEmpty()) {
            return new ResponseEntity<>("文件不能为空", HttpStatus.BAD_REQUEST);
        }
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOAD_PATH + File.separator + file.getOriginalFilename());
            Files.write(path, bytes);
            return new ResponseEntity<>("文件上传成功", HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return new ResponseEntity<>("文件上传失败", HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}

2.前端代码部分

<template>
    <div>
      <el-upload
        drag
        action="http://localhost:8081/file/upload"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">拖拽文件到此处上传</div>
      </el-upload>
    </div>
  </template>

  <script>
export default {

  methods: {
    handleUploadSuccess(response, file) {
      this.$message.success('文件上传成功');
    },
    handleUploadError(err, file) {
      this.$message.error('文件上传失败');
    }
    
  }
};
</script>