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

Question

我用Google搜索过去2天仍无法找到解决此问题的方法。我可以使用type属性设置为file的input元素上传。但我无法使用croppie将裁剪后的图像上传到服务器。

这是我的register.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>
}

这是我的main.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);
      }
    });
  });
});

这是我的ProfilesController.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

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

$ .ajax（{url：“http://localhost:9000/upload”，type：“POST”，data：resp，success：function（data）{alert（resp）;

然后我还将profilecontroller.java更改为

public Result upload（）{

    String dataUrl = request().body().asText();
    System.out.println(dataUrl);

    return ok("Data URI Passed");

}

这给了我来自javascript的数据URI并将其传递给JAVA代码。现在我需要尝试使用数据URI上传图像。如果您知道答案，请参与此帖。