Grails 2.5.11 / Postgresql 10，上传图片并在GSP中显示

Question

您好，我是 Grails 和 PostgreSQL 的新手。我正在尝试制作一个存储用户数据的表单，并且我希望能够上传多张照片。

服务：

Cars carInstance = new Cars() 
carInstance.carimg = params.carimg.getBytes()

gsp：

<input type="file" id="carimg" name="carimg" multiple />

我在控制器中调用saveCar 操作来保存用户将输入的所有数据。

我想以这种方式在showCar gsp 中显示带有图像的数据：

 <img src="${createLink(controller: 'garage', action: 'getImage', params: ['id': Cars.id])}"/>

获取图像并将其传递给 gsp 的 getImage 操作是这样的：

 def getImage(){
   def item = Cars.get(params.id.toLong())
   byte[] imageInByte=item.carimg
   response.contentType = 'image/png'
   response.outputStream << imageInByte
   response.outputStream.flush() }

在 gsp 中，它显示为一个空白边框，左上角有一个图像，这意味着可能找不到图像。 如果我将二进制数据转换为字符串，它会显示正确的照片名称。 有什么建议？问题在于我存储图像的方式或尝试将二进制数据显示到图像的方式？

Answer 1

在您的情况下，Cars.id 是什么？也许它是一系列汽车，您需要对其进行迭代？

<g:each in="${Cars.list()}" var="car">
 <img src="${createLink(controller: 'garage', action: 'getImage', params: ['id': car.id])}"/>
</g:each>

编辑 1：

根据您的回复，我创建了一个示例 grails(2.5.6) 项目。

域：

class Car {
    String name
    byte[] photo

    static constraints = {
        photo maxSize: 1024 * 1024 * 2
    }
}

在控制器中我有两种方法：

def show(Car carInstance) {
    respond carInstance
}

def showImage(int id) {
    def item = Car.get(id)

    byte[] imageInByte = item.photo

    response.contentType = 'image/png'
    response.outputStream << imageInByte
    response.outputStream.flush()
}

和 gsp 页面：

<g:fieldValue bean="${carInstance}" field="name"/>
<img src="${createLink(controller: 'Car', action: 'showImage', params: [id: carInstance.id])}"/>

并且图像渲染成功。

编辑 2：

对不起，我想念你尝试用多张图片做的事情。

首先您需要创建额外的域来存储照片：

class CarPhoto {
    byte[] photo

    static belongsTo = [car: Car]

    static constraints = {
        photo maxSize: 1024 * 1024 * 2
    }
}

并将此依赖项添加到 Car Domain：

class Car {
    String name
    static hasMany = [photos: CarPhoto]

    static constraints = {}
}

之后，您需要将这些更改应用到 showImage 操作：

def showImage(long id, long photo_id) {
    def car = Car.get(id)
    def photo = CarPhoto.findByCarAndId(car, photo_id)

    byte[] imageInByte = photo.photo

    response.contentType = 'image/png'
    response.outputStream << imageInByte
    response.outputStream.flush()
}

然后到gsp页面：

<g:each in="${carInstance.photos}" var="photo">
    <img src="${createLink(controller: 'Car', action: 'showImage', params: [id: carInstance.id, photo_id: photo.id])}"/>
</g:each>

您还需要更改上传方式。你可以找到信息here。