java 前后端使用流上传文件

原创

mob64ca12d42833 2024-07-31 05:21:25 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d42833的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用Java实现前后端文件上传

在现代Web应用中，文件上传功能十分常见。本文将教会你如何使用Java实现前后端进行文件上传的功能。我们将从整体流程入手，逐步分解每个步骤，并为每段代码提供详细解释。

整体流程

以下是实现文件上传的整体流程表：

步骤	说明
1	前端页面创建文件上传表单
2	使用AJAX发送文件到后端
3	后端接收文件并保存
4	返回上传结果给前端

甘特图展示

gantt
    title 文件上传流程
    dateFormat  YYYY-MM-DD
    section 前端开发
    创建文件上传表单       :a1, 2023-10-01, 1d
    使用AJAX上传文件       :after a1  , 1d
    section 后端开发
    接收上传文件          :2023-10-02, 1d
    保存文件到服务器      :after a3  , 1d
    返回结果              :after a4  , 1d

各步骤详解

1. 创建文件上传表单

前端页面需要有一个用于文件上传的表单。以下是使用HTML和Bootstrap创建表单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=" rel="stylesheet">
    <title>文件上传</title>
</head>
<body>
    <div class="container">
        文件上传
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="file">选择文件</label>
                <input type="file" id="file" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">上传文件</button>
        </form>
    </div>
    <script src="
    <script>
        $(document).ready(function(){
            $('#uploadForm').on('submit', function(e){
                e.preventDefault(); // 阻止表单默认提交
                var formData = new FormData(this); // 创建表单数据对象
                
                $.ajax({
                    url: '/upload', // 后端上传接口路径
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        alert('文件上传成功：' + response.message);
                    },
                    error: function() {
                        alert('文件上传失败！');
                    }
                });
            });
        });
    </script>
</body>
</html>

2. 后端接收文件并保存

接下来，在Java中创建处理文件上传的后端逻辑。我们使用Spring Boot构建后端服务，以下是关键代码：

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

import java.io.File;
import java.io.IOException;

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

    @PostMapping
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        // 定义文件保存路径
        String filePath = "uploads/" + file.getOriginalFilename();
        
        try {
            // 检查文件是否为空
            if (file.isEmpty()) {
                return ResponseEntity.status(400).body("文件不能为空");
            }
            // 保存文件
            file.transferTo(new File(filePath));
            return ResponseEntity.ok("{\"message\": \"文件上传成功\"}");
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(500).body("{\"message\": \"文件上传失败\"}");
        }
    }
}

注释：