重庆优化网站公司,网上找工程平台有哪些,长沙百度贴吧,wordpress 菜单首页使用Ant Design Pro前端框架结合Node.js Express后端服务以及MinIO作为对象存储#xff0c;实现文件上传和下载管理的基本步骤如下#xff1a;
1. 安装所需依赖
在Node.js Express项目中安装minio客户端库#xff1a;
npm install minio --save
在前端项目#xff08;假…使用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 namefile label上传文件 action/api/upload max{1} onFinish{onFinish} /);
}export default FileUploader;
6. 实现文件下载链接
根据后端返回的下载URL可以直接生成下载链接给用户点击。例如在React组件内
import { Button } from antd;function DownloadLink({ downloadUrl }) {return (Button typeprimary href{downloadUrl} download下载文件/Button);
}// 使用时传递从后端获取的URL
DownloadLink downloadUrl{/api/download/${encodeURIComponent(example.pdf)}} /
请确保替换上述代码中的占位符为实际的MinIO服务器地址、访问密钥、安全密钥、桶名称以及文件名并相应地调整文件上传和下载处理逻辑以适应您的具体需求。同时您可能需要使用像multer这样的中间件来处理上传的文件流。
