【发布时间】：2016-07-09 12:40:20
【问题描述】：
我的管理仪表板是在 Spring 上使用 JSF 2.2 + Primefaces 5.3 构建的。
我正在开发用于创建新实体的表单，其工作方式如下：
- 用户填写所有输入字段并上传图片（使用
<p:fileUpload）。 - 然后，
<p:imageCropper应该被刷新并显示上传的要裁剪的图像。 - 用户裁剪图像，然后按提交按钮创建新实体并将图像存储在磁盘上。
现在，我坚持第二步。 <p:imageCropper 不显示上传的图像。
我怀疑是否可以从托管 bean 的 StreamedContent obj 将图像获取到 <p:imageCropper 图像属性，例如 <p:graphicImage？
那么，请告诉我如何解决？
这是我的表格：
<h:form prependId="false" id="createForm" enctype="multipart/form-data">
<p:separator />
<p:growl id="messages" showDetail="true" />
<p:outputLabel value="Create card:" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Fill in Name:" for="cardName" />
<p:inputText id="cardName" value="#{cardController.name}"
required="false" requiredMessage="Please, enter new card Name" />
<p:outputLabel value="Fill in Description:" for="cardDescription" />
<p:inputTextarea id="cardDescription" rows="3" cols="33"
value="#{cardController.description}" />
<p:outputLabel value="Upload image:" for="cardImage" />
<p:fileUpload id="cardImage"
fileUploadListener="#{cardController.handleFileUpload}"
auto="false"
mode="advanced" dragDropSupport="false" update="messages cropped uploaded"
sizeLimit="100000" fileLimit="3"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:outputLabel value="change size of the image:" for="cropped" />
<p:imageCropper id="cropped" value="#{cropperView.croppedImage}" image="#{cardController.image}" initialCoords="225,75,300,125"/>
<p:graphicImage id = "uploaded" value="#{cardController.image}"/>
<p:commandButton value="Create"
action="#{categoryController.create()}"
update=" createForm" />
<p:message for="cardName" />
</h:panelGrid>
</h:form>
控制器：
@Controller
@Scope("session")
public class CardController {
private CroppedImage croppedImage;
private UploadedFile uploadedFile;
private String name;
private String description;
public void handleFileUpload(FileUploadEvent event) throws IOException {
System.out.println("!!! inside file upload");
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
uploadedFile = event.getFile();
}
public StreamedContent getImage() {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
// So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
return new DefaultStreamedContent();
}
else {
// So, browser is requesting the image. Return a real StreamedContent with the image bytes.
return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
}
}
public void create() {
// shoul be logic for creating new entities
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public CroppedImage getCroppedImage() {
return croppedImage;
}
public void setCroppedImage(CroppedImage croppedImage) {
this.croppedImage = croppedImage;
}
public UploadedFile getUploadedFile() {
return uploadedFile;
}
public void setUploadedFile(UploadedFile uploadedFile) {
this.uploadedFile = uploadedFile;
}
}
【问题讨论】：
-
@BalusC：您好，感谢您的快速响应。当我使用自定义 ViewScope 时，
<p:graficImage不工作，因此我将其更改为会话范围，仅用于测试目的。我想住在 ViewSope 中的控制器。硬刷新后，图像在浏览器中仍然可见。 -
@BalusC：
<p:imageCropper是否应该在两个单独的 HTTP 请求中为value属性获取图像？或者它使用一些不同的机制然后<p:graficImage？ -
@BalusC：更新之前的评论：
image 属性的图像？或者它使用一些不同的机制然后
标签： jsf jsf-2 primefaces