十九、 富文档与redis存储图片信息

列表文件

src\views\demo\jeecg\Native\one\OneNativeList.vue

<template #bodyCell="{ column, text, record }">

          <template v-if="column.dataIndex==='tupian'">

            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>

            <img v-else :src="getImgView(text)" :preview="record.id" alt="" class="anty-img-wrap" />

          </template>

          <template v-else-if="column.dataIndex==='wenjian'">

            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>

            <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(text)"> 下载 </a-button>

          </template>

其中：

getImgView(text)--à getFileAccessHttpUrl(text)

在文件src\utils\common\compUtils.ts中的如下：访问路径/sys/common/static/

export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {

  let result = fileUrl;

  try {

    if (fileUrl && fileUrl.length > 0 && !fileUrl.startsWith(prefix)) {

      //判断是否是数组格式

      let isArray = fileUrl.indexOf('[') != -1;

      if (!isArray) {

        let prefix = `${baseApiUrl}/sys/common/static/`;

        // 判断是否已包含前缀

        if (!fileUrl.startsWith(prefix)) {

          result = `${prefix}${fileUrl}`;

        }

      }

    }

  } catch (err) {}

  return result;

};

downloadFile(text)-à getFileAccessHttpUrl()

/**

 * 文件下载

 */

function downloadFile(url) {

  if (!url) {

    createMessage.warning('未知的文件');

    return;

  }

  if (url.indexOf(',') > 0) {

    url = url.substring(0, url.indexOf(','));

  }

  url = getFileAccessHttpUrl(url.split(',')[0]);

  if (url) {

    window.open(url);

  }

}

图片文件的显示和下载的后端响应contraller与《五十一》相同同

编辑页：

src\views\demo\jeecg\Native\one\components\OneNativeModal.vue

src\views\demo\jeecg\Native\one\components\OneNativeForm.vue

<a-col :span="24">

          <a-form-item label="文件" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.wenjian">

            <JUpload v-model:value="formState.wenjian"></JUpload>

          </a-form-item>

        </a-col>

        <a-col :span="24">

          <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.tupian">

            <JImageUpload :fileMax="2" v-model:value="formState.tupian"></JImageUpload>

          </a-form-item>

        </a-col>

Form表单先上传图片和文件并获得图片/文件路径，再提交表单时，提交和保存图片/文件路径，富文档就保存含有图片路径的html文档。

  const url = reactive<any>({

    duplicateCheck: '/sys/duplicate/check',

    add: '/test/jeecgDemo/oneNative/add',

    edit: '/test/jeecgDemo/oneNative/edit',

  });

后端响应：

@Slf4j
@Api(tags = "单表DEMO")
@RestController
@RequestMapping("/test/jeecgDemo")
public class JeecgDemoController extends JeecgController<JeecgDemo, IJeecgDemoService> {
    @Autowired
    private IJeecgDemoService jeecgDemoService;

@PostMapping("/oneNative/add")
public Result<String> oneNativeAdd(@RequestBody JSONObject jsonObject){
    Object oneNative = redisUtil.get("one-native");
    JSONObject nativeObject = new JSONObject();
    JSONArray data = new JSONArray();
    if(null != oneNative){
        nativeObject = (JSONObject) oneNative;
        data = nativeObject.getJSONArray("data");
    }

//新数据id值
    jsonObject.put("id", UUIDGenerator.generate());
    data.add(jsonObject);//计入新数据
    nativeObject.put("data",data);
    redisUtil.set("one-native",nativeObject);//存入redis数据库
    return Result.OK("添加成功");
}