Question

这是我的jquery代码：

var x = $('div.FileUpload img').prop('src');
var imgData = JSON.stringify(x);

$.ajax({
type: "POST",
datatype: 'json',
data: imgData,
url: "/Archives/SaveImage.html",
success: function(data) {
alert("successfully uploaded");
},
error: function (request, status, error) {
alert("failure");
}
});

这是弹簧控制器：

@RequestMapping(value="/Archives/SaveImage", RequestMethod.POST)
 public void SaveImage(@RequestParam(value = "imgData")Object imgData)
 { 
     System.out.println(imgData);
 }

imgData不是图片路径，它的编码字节如下：

 src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgIC‌AwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDA‌wYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAw..."

问题是在调试模式下，它没有弹簧控制器功能，错误信息是：“请求的参数（”imgData“）不可用

我认为这是因为@RequestParam变量类型。

任何人都可以帮助我吗？

Answer 1

尝试使用：

var imgData = JSON.stringify({'imgData': x});

当您使用AJAX中的data: imgData发送数据时，它不会使用该变量名称发送数据。那只是一个占位符。当你使用JSON.stringify(x)时，它只将x的值放入一个未命名属性的对象中（可能也是一个数组）。

JSON.stringify(x)  // "http://image.com/path.jpg"

JSON.stringify({'imgSrc': x})   //  "imgSrc": "http://image.com/path.jpg"

View demonstration here

第一张图片+文字是您的原始代码，下面的图片是修正

Answer 2

您不发送参数。您只发送数据。您发送的数据是字符串。如果您希望将其自动转换为其他内容，则需要使用适当的转换器。无论如何，你正在寻找的是@RequestBody注释。

public void SaveImage(@RequestBody String imgData)

如何通过ajax将图像数据作为参数发送到弹簧控制器

2 个答案:

View demonstration here