Jeecgboot框架的JUpload控件拓展实现预览功能

Jeecgboot框架的JUpload控件是基于a-upload定制开发的控件，能够实现文件的上传和下载。业务需要，点击已上传的文件名称时，不希望直接下载文件，是希望打开在线文件预览内容。

1 修改模型表单数据

component: 'JUpload',

    componentProps:{

      maxCount:1,

      download:false,

      returnUrl:true

    },

download 改为false，点击文件名就不会下载文件；

修改JUpload.vue的预览事件处理函数：

function onFilePreview(file) {

    if (isImageMode.value) {

      createImgPreview({ imageList: [file.url], maskClosable: true });

    } else {

      const previewUrl = ${import.meta.env.VITE_GLOB_ONLINE_VIEW_URL}/onlinePreview?url=${encodeURIComponent(encryptByBase64(file.url))};

      window.open(previewUrl, '_blank');

    }

}

其中，前端框架中.env文件中设置kkFileView的服务地址VITE_GLOB_ONLINE_VIEW_URL=http://127.0.0.1:8012。

kkFileView的部署方法参见 https://blog.csdn.net/qq_33697094/article/details/126076565。

2 修改JVxeFileCell.vue和JVxeUploadCell.vue控件增加预览功能

首先，修改useJVxeUploadCell.ts增加预览功能函数定义，

function handleFilePreview() {

    let { url, path } = innerFile.value || {};

    if (!url || url.length === 0) {

      if (path && path.length > 0) {

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

      }

    }

    if (url) {

      const previewUrl = ${import.meta.env.VITE_GLOB_ONLINE_VIEW_URL}/onlinePreview?url=${encodeURIComponent(encryptByBase64(url))};

      window.open(previewUrl, '_blank');

    }

  }

返回对象中增加handleFilePreview函数

return {

    ...setup,

    ... ...

    handleFilePreview,

  };

 

其次，JVxeFileCell.vue和VxeUploadCell.vue中增加预览按钮，

<a-menu-item v-if="originColumn.allowDownload !== false" @click="handleFilePreview">

      <span><Icon icon="ant-design:laptop" /> 预览</span>

</a-menu-item>