泰州网站建设,wordpress 中英文双语,wordpress评论表情插件,网站开发计入什么会计科目思路#xff1a;后端提供接口#xff0c;从minio获取文件的预览链接#xff0c;返回给前端#xff0c;前端使用组件进行渲染展示
这里我从minio获取文件预览地址用到了一个最近刚开源的项目#xff0c;挺好用的#xff0c;大伙可以试试#xff0c;用法也很简单 官网后端提供接口从minio获取文件的预览链接返回给前端前端使用组件进行渲染展示
这里我从minio获取文件预览地址用到了一个最近刚开源的项目挺好用的大伙可以试试用法也很简单 官网https://x-file-storage.xuyanwu.cn/#/ Giteehttps://gitee.com/dromara/x-file-storage?_fromgitee_search
dependencygroupIdorg.dromara.x-file-storage/groupIdartifactIdx-file-storage-spring/artifactIdversion2.1.0/version
/dependencydromara:x-file-storage:default-platform: minio-1 # 默认存储平台minio:- platform: minio-1 # 存储平台标识enable-storage: true # 启用存储access-key: vsrfrBr3maUFmserLMp9secret-key: i2ehAdnwos1eWu0ZNqkMgJdhsGZSF8PSp03mG86xend-point: http://XXX.XXX.XXX.XXX:9000bucket-name: filedomain: ?? # 访问域名注意“/”结尾例如http://minio.abc.com/abc/base-path: # 基础路径以下是后端接口主要逻辑把viewUrl给前端返回就行格式类似于,文件名后面拼接着认证信息什么的后端工作到这里就完成了 “http://XXX.XXX.XXX.XXX:9000/file/65c416eecc50d2508a5fb86b.docx?X-Amz-AlgorithmAWS4-HMAC-SHA256X-Amz-CredentialvsrfrBr3maUFmserLMp9%2F20240208%2Fus-east-1%2Fs3%2Faws4_requestX-Amz-Date20240208T025942ZX-Amz-Expires604800X-Amz-SignedHeadershostX-Amz-Signatureb31d4ce4142bb0626f6e45a9448255124c125bf4f2e6e2be506e4f736909dadc”
Autowired
private FileStorageService fileStorageService;// 上传到minio返回的文件名称
String minioName sysFile.getMinioName();
FileInfo fileInfo new FileInfo().
setPlatform(minio1).setFilename(minioName);
// 获取一周后的时间作为过期时间
DateTime dateTime DateUtil.offsetWeek(DateUtil.date(), 1);
String viewUrl fileStorageService.generatePresignedUrl(fileInfo, dateTime);
// 把文件名放进响应头前端获取文件后缀需要用
response.setHeader(Content-Disposition, attachment;filename URLEncoder.encode(minioName, utf8));下面开始前端工作找到一个渲染的组件react-file-vieweryarn add react-file-viewer核心代码fileType文件类型比如docx、pdf等等filePath文件的下载地址这两个属性是必需的
FileViewerfileType{fileViewType}filePath{fileViewUrl}errorComponent{CustomErrorComponent}onError{onError}style{{ width: 100% }}
/文件类型可以从响应头中拿到
const content response.headers[content-disposition].split();
const fileName decodeURI(content[1]); // 设置下载的文件名
const ext getFileExtension(fileName);
setFileViewType(ext);// 获取文件名中的后缀
function getFileExtension(fileName: string): string {/*只获取后缀*/var suffix fileName.substring(fileName.lastIndexOf(.) 1); //txtreturn suffix;
}看看效果两个按钮是antdv 的 Modal组件带的 恭喜你至此已经完成 多提一嘴x-file-storage用来上传下载也很方便
// 上传
FileInfo upload fileStorageService.of(multipartFile).upload();
// 下载
FileInfo fileInfo new FileInfo()
.setPlatform(minio-1).setFilename(sysFile.getMinioName());
Downloader download fileStorageService.download(fileInfo);
