上传组件使用kkfileview实现文件预览
最后更新于:2022-04-02 07:15:38
#### 基于`kkfileview:v2`,修改上传组件(JUpload),支持点击文件预览。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/f0/ca/f0ca6a9700e73058f30feb41fbf1946f_1428x701.png)
[kkfileview参考文档](https://www.kancloud.cn/zhangdaiscott/jeecg-boot/2043964)
*本示例无官方代码,下方修改仅供参考*
想要实现上述功能,需修改上传组件(JUpload)
- 1.a-upload配置项修改
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/86/54/865494b4a4319fdbdae5afdbafb015f9_1755x441.png)
~~~
@download="handleDownload"
:showUploadList="{ showRemoveIcon: true, showDownloadIcon: true }"
~~~
- 2.新增下载方法,修改预览方法
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a6/d9/a6d9ca89095bef6de355d09fb944a891_1615x358.png)
~~~
handlePreview(file){
if(this.fileType === FILE_TYPE_IMG){
this.previewImage = file.url || file.thumbUrl;
this.previewVisible = true;
}else if (file.url) {
// 此base地址可以配置到一个常量文件里
let base = "http://127.0.0.1:8012/onlinePreview?url="
let url = base+encodeURIComponent(file.url)
window.open(url, '_blank')
}
},
// 文件下载
handleDownload (file) {
location.href=file.url
},
~~~
';