前端Vue通过Minio返回的URL下载文件实现方法
作者：諵溪丶
Minio是一个灵活、高性能、开源的对象存储解决方案,适用于各种存储需求,并可以与云计算、容器化、大数据和应用程序集成,这篇文章主要给大家介绍了关于前端Vue通过Minio返回的URL下载文件实现的相关资料,需要的朋友可以参考下
最近在使用下载Minio实现下载文件时遇到的一些问题，前端直接点击后端返回的URL不可以调用下载而是直接预览，下面将我实现的方法分享：
1、数据库File表
2、通过文件id查询相关数据
FileController接口
FileServiceImpl实现类
3、前端这样操作：
const fileId = '1783377440079638530'
downloadFile(fileId).then(res => {
if (res.code === '0000') {
// window.open(res.data)
const downloadLink = document.createElement('a')
// 将地址url转成blob地址
fetch(res.data.url).then(res => res.blob()).then(blob => {
downloadLink.href = URL.createObjectURL(blob)
// 下载文件的名称
downloadLink.download = res.data.fileName
document.body.appendChild(downloadLink)
downloadLink.click()
// 清除 占用的缓存资源
window.URL.revokeObjectURL(downloadLink.href)
document.body.removeChild(downloadLink)
})
}
})
4、点击相应按钮即可弹出下载框：下载文件、保存到电脑相应位置。
附：Minio中文路径造成无法下载问题解决办法
Minio中文路径造成无法下载问题.net core解决办法
//后端需要对含有中文的路径进行加密 var encodedFilePath= Encoding.UTF8.GetString(Convert.FromBase64String(filePath)); var lastFilePath = HttpUtility.UrlDecode(encodedFilePath);
// 前端使用TS, 对url 进行编码 encodeURIComponent(imagePath)
总结
到此这篇关于前端Vue通过Minio返回的URL下载文件实现方法的文章就介绍到这了,更多相关Vue Minio返回URL下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！