使用 Java PlayFramework 2.6 将裁剪的"croppie"图像上传到服务器

Question

我已经用谷歌搜索了过去两天，但仍然找不到这个问题的解决方案。我可以使用类型属性设置为文件的输入元素上传。但是我无法使用裁剪将裁剪的图像上传到服务器。

这是我的注册.scala.html：

@helper.form(action = routes.ProfilesController.upload, 'id -> "profileForm", 'class -> "", 'enctype -> "multipart/form-data") {
@CSRF.formField
<div  class="col-6 col-md-3 pic-padding">
<div id="upload-demo" class="upload-demo pic-1 mx-auto d-block rounded">
</div>
<div class="pic-number" href="#">1</div>
<label for="upload-pic1" class="pic-control-bg">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</label>
<input type="file" id="upload-pic1" name="pic1" class="upload-btn" accept="image/*">
<button type="button" class="upload-result">Result</button>
<script>
Demo.init();
</script>
</div>
}

这是我的主要.js：

$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "http://localhost:9000/upload",
type: "POST",
data: {"image":resp},
success: function (data) {
alert(resp);
}
});
});
});

这是我的配置文件控制器.java

public Result upload() {
File file = request().body().asRaw().asFile();
return ok("File uploaded");
}

以下是路由文件中的一个片段：

POST    /upload                     controllers.ProfilesController.upload()

上述解决方案得到的错误是：

[CompletionException： java.lang.NullPointerException]

请帮忙！在过去的两天里，这一直让我感到压力，我只是想不通。

Answer 1

这还没有完全解决，但我已经取得了足够的进展，产生了一个不同的问题。我最终将我的 ajax 请求更改为 main.js：

$.ajax({ 网址： "http://localhost:9000/upload"， 类型："开机自检"， 数据：参考资料， 成功：函数(数据({ 警报(回复(;

然后我还更改了配置文件控制器.java

公共结果上传(( {

String dataUrl = request().body().asText();
System.out.println(dataUrl);
return ok("Data URI Passed");

}

这给了我来自javascript的数据URI，并将其传递给JAVA代码。现在，我需要尝试使用数据 URI 上传图像。如果您知道这个问题的答案，那么请为这篇文章做出贡献。