前后端分离实现文件上传下载
前面的文章分享了使用两种方式实现文件上传，从本文开始分享从文件服务器 Minio 上获取文件，本文分享最简单的预览。由于文件类型很多（office、pdf、图片等），不同类型的文件在浏览器中展示支持程度不同，而本系列的重点是“前端 – 后端 – Minio”的交互，故本文只演示图片的预览，关于 office 等的预览、kkFilePreview 等在本系列末尾再抽空分享。
一、后端实现
1.1
定义接口
由于 Minio 中的 Bucket 默认安全策略是 Private，直接通过文件名和文件服务器地址无法直接访问文件，需要通过 Minio API 来进行访问，故定义一个接口供前端预览图片。
接口定义如下：
接口 URL：/file/preview
请求方式：GET
请求参数：
– bucketName：桶名称
– fileName：文件名
接口返回：临时访问路径URL
FileController：
public String preview( String bucketName,String fileName) {return fileUtils.preview(fileName, bucketName);}
preview 接口需要输入两个参数：Bucket 名称和文件名，返回文件的临时访问路径（该临时访问路径一段时间后会失效）。
1.2
实现预览方法
在 Fileutils 中封装 preivew 预览方法：该方法调用 Minio API 提供的分配临时访问链接的方法，获取文件的临时访问路径：
/*** 文件预览** @param bucketName 桶名称* @param fileName 文件名* @return 文件临时访问URL*/public String preview(String bucketName, String fileName) {GetPresignedObjectUrlArgs args = GetPresignedObjectUrlArgs.builder().bucket(bucketName).object(fileName).method(Method.GET).build();try {return minioClient.getPresignedObjectUrl(args);} catch (Exception e) {e.printStackTrace();}return null;}
二、前端实现
2.1
调用后端接口
在 file-service.ts 中定义 preivew 方法，调用后端接口：
...class FileService {.../*** 获取文件临时访问路径*/public preview (fileName: string, bucketName: string): Promise {const params = { fileName, bucketName }return request.get('/file/preview', { params })}}...
2.2
界面调用预览图片
调用 fileService 中的 preview 方法，可以获取到文件的临时访问路径，在 img 标签的 src 设置改属性便可以直接显示图片：
<template><div><h1>前后端分离 文件上传下载测试h1><el-input v-model="bucketName">el-input>...<el-input v-model="fileName">el-input><el-button type="primary" @click="onPreview">预览图片el-button><img :src="imgSrc" v-if="imgSrc">div>template><script lang="ts" setup>...import { fileService } from '@/service/file-service'...const fileName = ref('1688019150811_26796288.png')const imgSrc = ref('')const onPreview = async () => {console.log(fileName.value)const resp = await fileService.preview(fileName.value, bucketName.value)console.log(resp)if (resp) {imgSrc.value = resp}}script>
在输入框中输入正确的 bucketName 和 fileName，点击“预览图片”按钮后，会获取到图片的临时路径，并在 img 标签中显示该图片。
2.3
新选项卡中打开
在这里，咱们可以暂时利用浏览器的能力，在新选项卡中打开接口返回的临时 url，间接实现文件下载。
界面上添加一个测试按钮：
type="primary" ="onPreviewDownload">下载-预览链接</el-button>
实现点击事件：
const onPreviewDownload = async () => {const resp = await fileService.preview(fileName.value, bucketName.value)if (resp) {window.open(resp, '_blank')}}
本文内容比较简单（但优雅的文件预览并不是一个简单的功能，兼容各种文件类型、PC 端各种浏览器、移动端，甚至钉钉浏览器与微信浏览器都有一些差异，优雅哥后续会逐步分享），下文分享基于文件流的文件下载。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=14630，转载请注明出处。
评论0