java后端封装图片上传接口并前端怎么调用(jquery)

后端接口的代码示例（使用Spring Boot）:

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
@RestController
public class ImageUploadController {
 
    @PostMapping("/uploadImage")
    public String uploadImage(@RequestParam("file") MultipartFile file) {
        // 这里应该是文件上传的逻辑，比如保存文件到服务器等
        // 返回一个图片的URL或其他信息
        return "http://example.com/uploaded_image.png";
    }
}

前端使用jQuery调用上述接口的代码示例:

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="button" value="Upload" onclick="uploadImage()" />
</form>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function uploadImage() {
    var formData = new FormData($('#uploadForm')[0]);
 
    $.ajax({
        url: '/uploadImage',  // 你的后端接口地址
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log('Image uploaded successfully. URL:', response);
            // 处理成功情况
        },
        error: function() {
            console.log('Image upload failed.');
            // 处理错误情况
        }
    });
}
</script>

确保后端接口的URL与前端jQuery调用的URL相匹配。在实际部署时，前端代码中的URL需要根据实际部署的后端服务地址进行相应的调整。