文件上传，下载，查询，删除以及预览

本人项目中的一个页面，涉及文档上传，下载，预览，删除以及查询五个接口以及效果展示。

该组件库用的是Ant Design of Vue 详请看这：https://1x.antdv.com/docs/vue/introduce-cn/

先提前陈述一下，我的后端用的是minio进行文件的上传，以及kkfile进行文件预览，上传和下载的话用的是同一个filed,下面就开始上代码展示。

首先是文件的上传，本人这就做了单文件上传，如果想一次上传两个或多个也可以，就是同时多发几次请求。

            <a-upload
              name="file"
              :multiple="true"
              :customRequest="determine"
              :action="uploadUrl"
              :headers="headers"
              :showUploadList="false"
             >
              <a-button type="primary" style="margin-left: 80px;">上传文件</a-button>
            </a-upload>

接下来是script中的代码展示

    //文档上传请求 弹窗确定按钮
    determine(request){
      let form = new FormData();
      form.append("file", request.file);
      form.append("orgCode",7);
      form.append("equipmentId", '');
      Uploadocument(  
          form
        ).then(res=>{
          console.log(res);
          this.datashuju()
        }).catch(err=>{
          console.log(err)
        })
    },

接下来是文件的下载，预览和删除，这三个功能是利用插槽放到table里的操作功能栏里的，所以一次性贡献代码；

<a-table 
      :columns="columns"
      :data-source="datalist"
      :bordered="true"
      :pagination="{ pageSize: 5 }"
      :scroll="{ y: 360 }"
       >
 <!-- 操作里的删除和下载 -->
   <template #name="{ record }" slot-scope="text, record">    
        <a-button type="primary" size="small" ghost @click="btndelt(record)">删除</a-button>
        <a-button type="primary" size="small" ghost @click="btn_filedown(record)">下载</a-button>
        <a-button type="primary" size="small" ghost @click="geturl(record)" >预览</a-button>
  </template>
</a-table>

接下来是script中的代码片段：

删除的话是直接从数据库删掉文件

    //删除
    btndelt(record){
      Deldocument(record.fileId).then(res=>{
        console.log(res);
        this.datashuju()
      })
    },

下载：通过根据上传的filed进行文件的下载。

    // 文件下载
    btn_filedown(record){
      // 需要用所需下载的id进行文件的下载
      Filedown(record.fileId).then(res=>{
        console.log(res);
        // 创建a标签
        const elink = document.createElement('a')
        elink.download = record.fileName
        elink.style.display = 'none'
        // 获取文件下载的地址
        elink.href = URL.createObjectURL(new Blob([res.data]))
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      }).catch(error=>console.log(error))
    },

查询的功能只需要调用接口，因为页面的表格里打开页面就有数据，所有需要在created里调用查询这个事件

 //让表格的数据在页面加载出来就渲染
created(){
      this.datashuju()
      },
    // 表格获取的数据
  datashuju(){
      Checkdocument(this.searchFileParam).then((res)=>{
        this.datalist = res.items;
      }) 
   },

    // 查询文档
    onSearch(){
      this.searchFileParam.fileType = this.file_type
      this.searchFileParam.fileId = this.file_ID
      this.searchFileParam.fileName = this.file_name
      this.datashuju()
    },

文档的预览是利用后端的kkfile，所以会给前端提供一个window.ope的方法使用，预览的话是打开一个新窗口，代码如下：

此处还需要前端下载base64包并引入：

npm install --save js-base64
//在当前的页面进行引入
import { Base64 } from 'js-base64';

//获取预览链接
geturl(record){
   Previewdocument(record.fileId).then((res)=>{
    window.open('http://项目的Ip地址:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(res)));
      })
    },

最后放上几个接口功能里所有的定义的数据（都是后端必传的参数和字段）：

  data() {
    return {
      file_type:'',
      file_name:'',
      file_ID:'',
      collapsed: false,
      bordered:false,
      equipmentId:"",
      file:"",
      programId:"",
      filed:'',
      fileId:'',
      isShow:false,
      id:'',
      // 上传文件使用
      headers: {
        authorization: 'authorization-text',
      },
      // 搜索查询-输入框
      searchName:'',//v-model
      // 参数  这里是查询条件
      searchFileParam:{
        endTime: "",
        fileType: "",
        filed: "",
        fileName:"",
        fileId:"",
        pageNum: 1,  
        pageSize: 20,
        orgCode: 7,
        startTime: "",
      },
      datalist:[],
  };
  },

最后说一下，如果后端用的是minio 和kkfile,上面的方法一定有效，但是必须让后端起着后台的项目，否则功能就会失效。