反馈已提交

网络繁忙

填报上传图片

  • 文档创建者:文档助手1
  • 编辑次数:37次
  • 最近更新:Leo.Tsai 于 2022-07-04
  • 1. 概述

    1.1 问题描述

    我们在采集员工信息时,通常需要上传员工的照片。那么如何实现上传图片功能呢?

    1.2 解决思路

    「文件控件」支持上传图片,支持的图片格式有:jpg、png、gif,如下图所示:

    注:上传的图片以二进制编码的形式存储到数据库表中。

    1600926050609265.png

    2. 示例

    2.1 准备模板

    打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeForm\自由填报模板.cpt  ,模板制作过程可参见:自由报表填报,表格样式如下图所示:

    图片.png

    2.2 控件设置

    1)H6 单元格添加了一个「文件控件」,由于每个员工只需上传一张照片,因此勾选「只支持单文件上传」,如下图所示:

    图片.png

    注:“只支持单文件上传”,勾选此按钮后,上传照片会直接显示图片和文件名;如果不勾选,上传后则不会直接显示图片,只显示文件名。

    2)点击「控件设置>移动端」,可设置移动端预览时的图片上传方式,如下图所示:

    image.png

    3)上传的图片会以二进制编码的形式存到雇员表的照片字段下,所以数据库表中「照片」的字段类型需修改为可存储二进制的类型,如下图所示:

    1609729554176057.png

    注:blob 类型数据可能无法在数据集预览,请在其他数据库表查询软件中查看是否上传成功。

    2.3 图片展示

    当需要展示数据库存储的图片时,可设置「用图片显示内容」解决。

    选中单元格,选择「单元格属性>其他>显示内容」,选择「用图片显示内容」。如下图所示:

    2.4 图片布局设置

    如果图片太大,可能无法正常显示,可设置「图片布局」解决。

    选中单元格,选择「单元格属性>样式>自定义样式>对齐」,设置图片布局的方式为「适应」。如下图所示:

    Snag_160f97d0.png

    2.5 效果预览

    2.5.1 PC 端

    保存模板,点击「填报预览」,点击上传图片,效果如下图所示:

    76F51B4D-8272-4D07-8F73-FC6727939279.GIF

    2.5.2 移动端

    同时支持 App 端和 H5 端上传图片。效果如下图所示:

    1600833452847274.jpg

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeForm\自由填报模板.cpt

    点击下载模板:自由填报模板.cpt

    4. 注意事项

    上传图片后提示:将截断字符串或二进制数据,如下图所示

    1598002845407362.png

    这是由于数据库中存在该图表字段长度不够导致的,只需要给这个字段加长即可。

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭