首页 > 解决方案 > Vue js、Axios、甲骨文。如何使用一个 blob 字段从 db 加载 ref 游标?

问题描述

我有一个任务。我需要使用 axios 使用 vue js 从 Oracle 将记录加载到 Web。我在 db 中有一个没有参数类型 sys refcursor 的过程。在游标中有三个字段的记录,两个字段是varchar,一个字段是blob。我确实通过 axios 获取请求并获取数据,然后这个数据从 DevExtreme 链接到网格。但结果我在表中只看到了 varchar 值并且没有显示 blob。代码在这里,我刚开始学习Web,这就是为什么它可能很糟糕)

<template>
  <div class="hello">
    <DxDataGrid
      id="gridContainer"
      :data-source="gridData"
      :show-borders="true"
    >
      <DxColumn
        :width="100"
        data-field="CODE"
      />
      <DxColumn
        :width="215"
        data-field="PREVIEW_IMAGE"
        cell-template="cellTemplate"
      />
      <DxColumn
        :width="200"
        data-field="FILE_NAME"
      />
      <template #cellTemplate="{ data }">
        <img :src="data.value">
      </template>
    </DxDataGrid>
  </div>
</template>

<script>
  import axios from "axios";
  import { DxButton } from "devextreme-vue/button";
  import { DxDataGrid, DxColumn } from "devextreme-vue/data-grid";

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    components: {
      DxButton,
      DxDataGrid,
      DxColumn
    },
    data() {      
      return {
        gridData: []
      }
    },
    mounted() {
      axios.get("/api/mo_web_api/item_list_for_grid")
        .then(response => {
          console.log(response.data.o_item_list);
          this.gridData = response.data.o_item_list;
        })
    }
  }
</script>

标签: javascriptvue.jsaxiosblobdevextreme

解决方案


推荐阅读