-1

在过去的 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()

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

[完成异常：java.lang.NullPointerException]

请帮忙！在过去的两天里，这一直困扰着我，我只是想不通。

4

1 回答 1

0

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

$.ajax({ url: " http://localhost:9000/upload ", type: "POST", data: resp, success: function (data) { alert(resp);

然后我还将 profilecontroller.java 更改为

公共结果上传（）{

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

    return ok("Data URI Passed");

}

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

于 2018-08-30T12:23:22.673 回答