java - 使用 Java PlayFramework 2.6 将裁剪的“croppie”图像上传到服务器
问题描述
在过去的 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]
请帮忙!在过去的两天里,这一直困扰着我,我只是想不通。
解决方案
这还没有完全解决,但我已经取得了足够的进步来产生一个不同的问题。我最终将 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 上传图像。如果您知道这个问题的答案,请为这篇文章做出贡献。
推荐阅读
- mpdf - mpdf临时文件目录在服务器上传时不可写
- sqlite - 将小时数添加到 Sqlite 中的时间戳列会导致 NULL,为什么?
- openstreetmap - GeoServer / GWC / WMTS Return (400) Bad Request for part of map
- python - 如何实现在超类中打印对象的方法?
- javascript - 从远程服务器刷新语义 UI 下拉列表的内容
- c# - Google 报告未显示在 Mvc c# 的 pdf 报告中
- tailwind-css - 在全屏 div 中与 Tailwind CSS 垂直对齐
- typescript - typescript compiler api - 如何检测属性类型是枚举还是对象
- mysql - MySQL在插入触发器之前删除插入条件
- mysql - 如何避免添加重复的外键约束