使用antd design pro 及后端nodejs express 结合minio进行文件的上传和下载管理

使用Ant Design Pro前端框架结合Node.js Express后端服务以及MinIO作为对象存储,实现文件上传和下载管理的基本步骤如下:

1. 安装所需依赖

在Node.js Express项目中安装minio客户端库:

npm install minio --save

在前端项目(假设基于Ant Design Pro)中安装文件上传组件依赖:

npm install @ant-design/pro-form axios --save

或者如果使用Uplader组件:

npm install antd-upload axios --save

2. 配置后端Express服务器与MinIO连接

创建一个名为minioClient.js的文件或在现有配置文件中添加以下内容以设置MinIO客户端:

// minioClient.js
const Minio = require('minio');const minioClient = new Minio.Client({endPoint: 'your-minio-server-address',port: 9000, // 或者你使用的端口useSSL: false, // 如果是HTTPS连接,则为trueaccessKey: 'your-access-key',secretKey: 'your-secret-key',
});module.exports = minioClient;

3. 创建文件上传API

在Express应用中创建一个路由处理文件上传至MinIO。

// server/controllers/minioController.js
const express = require('express');
const minioClient = require('../config/minioClient');const router = express.Router();router.post('/upload', async (req, res) => {try {const { file } = req.files; // 假设通过multer等中间件解析了文件// 创建一个新的对象名,可以包含路径前缀const objectName = `uploads/${file.originalname}`;// 上传文件到MinIOawait minioClient.putObject('your-bucket-name', objectName, file.buffer, file.size, 'application/octet-stream');res.status(200).json({ message: 'File uploaded successfully', url: `/download/${encodeURIComponent(objectName)}` });} catch (err) {console.error(err);res.status(500).json({ error: 'Failed to upload file' });}
});module.exports = router;// 在主应用中注册这个路由
// server/index.js or app.js
const minioController = require('./controllers/minioController');
app.use('/api', minioController);

4. 创建文件下载API

// 添加到上面的minioController.js
router.get('/download/:filename', async (req, res) => {try {const filename = decodeURIComponent(req.params.filename);const stream = await minioClient.getObject('your-bucket-name', filename);res.setHeader('Content-Type', 'application/octet-stream');res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);stream.pipe(res);} catch (err) {console.error(err);res.status(404).json({ error: 'File not found' });}
});

5. 前端Ant Design Pro实现文件上传

在Ant Design Pro中使用ProFormUpload或其他上传组件进行文件上传:

import { ProFormUploadButton } from '@ant-design/pro-form';
import axios from 'axios';function FileUploader() {const onFinish = async (values) => {const formData = new FormData();formData.append('file', values.file as Blob);try {const response = await axios.post('/api/upload', formData); // 替换为你的上传接口地址console.log(response.data);} catch (error) {console.error(error);}};return (<ProFormUploadButton name="file" label="上传文件" action="/api/upload" max={1} onFinish={onFinish} />);
}export default FileUploader;

6. 实现文件下载链接

根据后端返回的下载URL,可以直接生成下载链接给用户点击。例如,在React组件内:

import { Button } from 'antd';function DownloadLink({ downloadUrl }) {return (<Button type="primary" href={downloadUrl} download>下载文件</Button>);
}// 使用时传递从后端获取的URL
<DownloadLink downloadUrl={`/api/download/${encodeURIComponent('example.pdf')}`} />

请确保替换上述代码中的占位符为实际的MinIO服务器地址、访问密钥、安全密钥、桶名称以及文件名,并相应地调整文件上传和下载处理逻辑以适应您的具体需求。同时,您可能需要使用像multer这样的中间件来处理上传的文件流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言字符串分割函数strtok_s和strtok

strtok_s和strtok是C语言提供的字符串分割函数&#xff0c;用于将一个字符串按照指定的分隔符进行分割成多个子字符串。 strtok_s是C11标准库中提供的安全版本的字符串分割函数&#xff0c;其基本语法如下&#xff1a; char* strtok_s(char* str, const char* delim, char** …

航空飞行器运维VR模拟互动教学更直观有趣

传统的二手车鉴定评估培训模式存在实践性不强、教学样本不足、与实际脱节等一些固有的不足。有了VR虚拟仿真技术的加持&#xff0c;二手车鉴定评估VR虚拟仿真实训系统逐渐进入实训领域&#xff0c;为院校及企业二手车检测培训提供了全新的解决方案。 高职院校汽车专业虚拟仿真实…

DC-3靶机刷题记录

靶机下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1-P5ezyt5hUbmmGMP4EI7kw?pwdrt2c 提取码&#xff1a;rt2c 参考&#xff1a; http://t.csdnimg.cn/hhPi8https://www.vulnhub.com/entry/dc-32,312/ 官网http://t.csdnimg.cn/5mVZ7DC-3 (1).pdfhttps://…

模具制造企业ERP系统有哪些?企业怎么选型适配的软件

模具的生产管理过程比较繁琐&#xff0c;涵盖接单报价、车间排期、班组负荷评估、库存盘点、材料采购、供应商选择、工艺流转、品质检验等诸多环节。 有些采用传统管理手段的模具制造企业存在各业务数据传递不畅、信息滞后、不能及时掌握订单和车间生产情况&#xff0c;难以对…

【CF比赛记录】 —— Codeforces Round 920 (Div. 3)(A、B、C、D)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;CF比赛记录 &#x1f48c;其他专栏&#xff1a; &#x1f534;每日一题 &#x1f7e1; cf闯关练习 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓…

学习使用微信小程序实现智能名片电子名片功能代码

学习使用微信小程序实现智能名片电子名片功能代码 拨打手机号功能一键复制信息功能定位导航功能存入手机通讯录功能转发分享功能 拨打手机号功能 wx.makePhoneCall({phoneNumber: qipa250 //仅为示例&#xff0c;并非真实的电话号码 })一键复制信息功能 wx.getClipboardData(…

【ARMv8M Cortex-M33 系列 7.1 -- xPSR | CFSR | HFSR | BFAR | MMFAR 寄存器】

文章目录 问题背景Cortex-M33 Fault 寄存器介绍xPSR (程序状态寄存器)CFSR (可配置故障状态寄存器)HFSR (硬件故障状态寄存器)BFAR (总线故障地址寄存器)MMFAR (内存管理故障地址寄存器) 问题背景 由于在RA4M2&#xff08;Cortex-M33&#xff09;移植RT-Thread OS的时候遇到了…

mysql limit

语法 SELECT * FROM TABLE_NAME LIMIT 起始位置&#xff0c;偏移量注&#xff1a; 起始位置从0开始 示例 查询的第1条数据到第100条数据 limit 0,100查询的第101条数据到第200条数据 limit 100,100注意不要用 limit 101,100示例2 limit 语句应放在order by语句后面执行 …

Java调用WebService接口,SOAP协议HTTP请求返回XML对象

Java调用Web service接口SOAP协议HTTP请求&#xff0c;解析返回的XML字符串&#xff1a; 1. 使用Java的HTTP库发送SOAP请求&#xff0c;并接收返回的响应。 可以使用Java的HttpURLConnection、Apache HttpClient等库。 2. 将返回的响应转换为字符串。 3. 解析XML字符串&…

第十五届蓝桥杯单片机组——串口通信UART

文章目录 一、什么是串口通信二、UART重要参数三、利用STC-ISP生成初始化代码四、使用UART发送和接收数据 一、什么是串口通信 微控制器与外部设备的数据通信&#xff0c;根据连线结构和传送方式的不同&#xff0c;可以分为两种:并行通信和串行通信。   并行通信:指数据的各位…

亚马逊云科技 WAF 部署小指南(六)追踪 Amazon WAF Request ID,排查误杀原因

众所周知&#xff0c;中国是全球制造业的巨大力量&#xff0c;许多中国企业通过 2B 电商平台网站进行商品销售和采购。在这些电商平台上&#xff0c;Web 应用防火墙&#xff08;WAF&#xff09;成为不可或缺的安全工具。然而&#xff0c;WAF 也可能导致误杀问题。一旦误杀发生&…

计算机毕设thinkphp+mysql+_vue房屋租赁系统h3sem

运行环境:phpstudy/wamp/xammp等 开发语言&#xff1a;php 后端框架&#xff1a;Thinkphp5 前端框架&#xff1a;vue.js 服务器&#xff1a;apache 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat/phpmyadmin 房屋租赁管理系统有不同的用户角色。不同的用户权限对应不…

【办公类-21-03】20240119 提取不连续的男女学号 set()和list法

背景需求&#xff1a;了解班级幼儿性别比例 查看点名册&#xff0c;发现中4班最初的学号是按照先男后女的方式排列&#xff0c;但是随着幼儿转出&#xff0c;空出一些学号&#xff0c;于是新插班的孩子就插入空的学号&#xff0c;空格插完了&#xff0c;就排在学号尾部。 我想…

Docker Consul详解与部署示例

目录 Consul构成 Docker Consul 概述 Raft算法 服务注册与发现 健康检查 Key/Value存储 多数据中心 部署模式 consul-template守护进程 registrator容器 consul服务部署&#xff08;192.168.41.31&#xff09; 环境准备 搭建Consul服务 查看集群信息 registrato…

YOLOv5改进 | 主干篇 | 华为GhostnetV1一种移动端的专用特征提取网络

一、本文介绍 本文给大家带来的改进机制是华为移动端模型Ghostnetv1,华为GhostnetV1一种移动端的专用特征提取网络,旨在在计算资源有限的嵌入式设备上实现高性能的图像分类。GhostNet的关键思想在于通过引入Ghost模块,以较低的计算成本增加了特征图的数量,从而提高了模型的…

【通知】我的教学文章《Rust跟我学》已全部上线

大家好&#xff0c;我是get_local_info开源库作者带剑书生&#xff0c;现在我的《Rust跟我学》专栏文章已全部上线&#xff0c;它记录了我在写库时获得的重要Rust经验和技巧&#xff0c;是不同于《Rust语言编程》等简单实践的书籍。为您节省了学习时间&#xff0c;让您可以快速…

深度剖析Spring循环依赖(实战Bug)

目录 前言1. 问题所示2. 原理分析3. 基本知识4. Lazy注解 前言 通过实战更好的回馈问题&#xff0c;意识更加深刻 起因是我出现如下问题之后&#xff0c;才意识到中了Spring的循环依赖了&#xff01; 1. 问题所示 在执行项目的时候&#xff0c;出现如下问题&#xff0c;问题…

2024.1.19 寒假训练记录(2)

昨晚的cf打得非常抽象&#xff0c;成功从蓝掉到青&#xff0c;不过在心理预期范围内&#xff0c;可以接受&#xff0c;之后每一场都会跟着打大号&#xff0c;能力的提升比表面上的分数更加重要 文章目录 CF 1922A Tricky TemplateCF 1922B Forming TrianglesCF 1922C Closest …

面试之Glide如何绑定Activity的生命周期

Glide绑定Activity生命周期 Glide.with() 下面都是它的重载方法&#xff0c;Context&#xff0c;Activity&#xff0c;FragmentActivity, Fragment, android.app.Fragment fragment,View都可以作为他的参数&#xff0c;内容大同小异&#xff0c;都是先getRetriever&#xff0…

2649. 嵌套数组生成器

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 题目描述 现给定一个整数的 多维数组 &#xff0c;请你返回一个生成器对象&#xff0c;按照 中序遍历…