Question

我已经搜索了过去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（{ 网址：“ http://localhost:9000/upload”，输入：“ POST”，数据：分别成功：功能（数据）{ 警报（resp）;

然后我也将profilecontroller.java更改为

公共结果upload（）{

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

    return ok("Data URI Passed");

}

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

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

1 个答案: