视图中显示上传的附件图片

1.场景介绍

在物料表单的视图中添加物料数据时，上传图片附件，保存后在物料的视图中，可以显示上传的附件图片。

本文以上述场景为例，讲解如何在视图中，创建显示列以显示图片。

2.效果展示

3.实现思路

添加自定义显示列，格式为自定义的html/Vue代码，代码中使用el-image标签请求图片路径并显示图片（请求路径参数需要携带当前登录用户的token）。

4.操作步骤

4.1创建数据实体

初始化数据库，以Mysql为例，脚本如下：

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
DROP TABLE IF EXISTS `test_materials`;
CREATE TABLE `test_materials`  (
  `ID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料名称',
  `material_type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料类型',
  `material_img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料图片',
  `prices` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料价格',
  `spce` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料规格',
  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;

创建物料数据实体，拖动数据源内的物料表至低开页面中，并保存。

4.2创建表单及视图

右键物料实体模型，生成页面，调整物料表单，并保存。

选择物料图片组件，修改物料图片的组件为附件上传。

更改文件类型为图片，展示模式为图片，并保存。

点击默认视图，点击视图设置-显示字段，隐藏已有的物料图片显示列。

4.3在视图中添加显示列

在视图页面中，添加一个v_token变量。

示例代码如下：

//获取当前登录用户的Authorization
localStorage.getItem("uniqueId").replace(/\"/g, "")

点击视图，在显示字段中添加显示列：自定义字段，修改列名为图片，格式为自定义并填写代码。

<!--给显示列添加一张图片，大小50px*50px，路径为图片的请求地址-->
<el-image style="width:50px;height:50px;"
          :src="`../api/lowcode/models/attachments/${formData.materialImg}/actions/download?Authorization=${v_token}`" >

最终效果：