创新设计记录-10：知识库文件删除

操作知识库的文件需要在显示知识库中文件的table中添加操作栏

 <el-table-column label="操作">
     <template #default="scope">
        <el-button type="danger" @click="deleteKB(scope.row)">删除</el-button>
        <el-button type="success" @click="dload_file(scope.row)">下载</el-button>
     </template>
</el-table-column>

添加插槽#default="scope"之后，每一行的数据都保存在scope.row中

知识库文件删除

/**
 * 删除数据库中的文件
 * @param row 行对象
 */
const deleteKB = (row) => {
  let map = {
    kb_id: currentKbId.value,
    file_names: row.name
  }
  delete_kb_file(map).then(res => {
    if (res.data.code == 500) {
      ElMessage({
        type: 'error',
        message: res.data.msg
      })
    } else if (res.data.code == 200) {
      ElMessage({
        type: 'success',
        message: res.data.msg
      })
      getpaginatedData();
    } else {
      ElMessage({
        type: 'info',
        message: res.data.msg
      })
    }
  })
}

调用后台的删除文件的接口，然后转发到langchainchat服务器上的删除文件。

知识库文件预览

知识库文件预览，效果是点击下载可以将这个文件下载下来，然后自己查看。

调用后台的接口可以得到原始文件的arrayBuffer数组，前端需要把arrayBuffer数组组装成原来的文件。

请求实例需要单开一个，请求头中需要添加响应体的类型

const fileRequest = axios.create({
    baseURL: fileURL,
    responseType: 'arraybuffer',
    headers: {
    }
})
function download_file(data){
    return fileRequest.post('', data)
}

这样后端返回的数据是被下载文件的content的数组。

vue界面方法

<script>
const dload_file = (row) => {
  let map = {
    kb_id: currentKbId.value,
    file_name: row.name,
    // preview: false
  }
  download_file(map).then(res => {
    console.log(res.data);
    let blob = new Blob([res.data], {type: 'application/octet-stream'})
    let a = document.createElement('a')
    a.download = row.name
    a.style.display = 'none'
    let url = URL.createObjectURL(blob)
    a.href = url
    document.body.appendChild(a)
    a.click()
    URL.revokeObjectURL(url) // 销毁
    document.body.removeChild(a)
  })
}
</script>

拿到文件的缓冲数组之后，将其组装为一个Blob对象，类型是application/octet-stream流类型。

然后在html中创建一个a标签，添加a下载文件的名，创建一个URL，URL的资源对象就是blob。

然后再document中添加这个标签，然后模拟点击这个标签，浏览器就会开始下载该文件。

然后将这个标签删除。