springboot 如何实现前端直接获取用户上传的图片封装成JSON后返回URL

要实现前端直接获取用户上传的图片封装成JSON后返回URL，可以按照以下步骤进行操作：

在Spring Boot项目中添加相关依赖，如spring-boot-starter-web、spring-boot-starter-data-jpa、spring-boot-starter-thymeleaf等。
创建一个实体类，用于存储图片信息，例如：

@Entity
public class Image {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String url;

    // 省略getter和setter方法
}

创建一个控制器类，用于处理图片上传和返回URL的请求，例如：

@RestController
public class ImageController {
    @Autowired
    private ImageRepository imageRepository;

    @PostMapping("/upload")
    public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) {
        try {
            Image image = new Image();
            image.setName(file.getOriginalFilename());
            image.setUrl("/images/" + file.getOriginalFilename());
            imageRepository.save(image);

            String fileName = StringUtils.cleanPath(file.getOriginalFilename());
            Path path = Paths.get("src/main/resources/static/images/" + fileName);
            Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING);

            return ResponseEntity.ok(image);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload image");
        }
    }
}

在前端页面中添加上传图片的表单和JavaScript代码，例如：

<form id="upload-form" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <button type="submit">Upload</button>
</form>

<script>
    $(function () {
        $('#upload-form').submit(function (event) {
            event.preventDefault();

            var formData = new FormData($(this)[0]);

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    var imageUrl = data.url;
                    // 使用返回的imageUrl进行其他操作
                },
                error: function (xhr, status, error) {
                    console.log(error);
                }
            });
        });
    });
</script>

运行Spring Boot项目，访问上传图片的页面，选择图片并上传，上传成功后返回的JSON数据中包含了图片的URL，可以使用该URL进行其他操作。

springboot 如何实现前端直接获取用户上传的图片封装成JSON后返回URL