测试平台系列(91)|测试平台系列(91) 编写oss管理页面
大家好~我是回顾米洛！
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程，希望大家多多支持。
欢迎关注我的公众号米洛的测开日记，获取最新文章教程!
上一节我们编写好了
oss相关的crud接口，那这一节我们就得为oss数据的管理编写一个新的页面了。即将做的是一个极度精简的
文件管理页面。效果图
因为我每次都是写完一段代码，然后编写对应教程，所以效果图这种东西自然是不在话下:
文章图片
图片可以点击下载，也可以
删除。编写oss下载接口
在此之前还是先搞定下之前的
作业。- 编写随机获取文件名的方法
文章图片
根据传入的文件名，配合pity的打乱顺序+当前时间戳，基本可以
保证百分之90的文件名冲突问题。- 实现阿里云的下载文件方法
文章图片
调用get_object_to_file即可，并返回新的文件路径。
- 封装下载文件的方法
文章图片
- 编写下载文件接口
@router.get("/download")
async def download_oss_file(filepath: str):
"""
更新oss文件，路径不能变化
:param filepath:
:return:
"""
try:
client = OssClient.get_oss_client()
# 切割获取文件名
filename = filepath.split("/")[-1]
path = client.download_file(filepath, filename)
return PityResponse.file(path, filename)
except Exception as e:
return PityResponse.failed(f"下载失败: {e}")
注意: 由于oss里面的
文件名都是带路径的（目录），所以我们split一下取出文件名。看看下载的效果
文章图片
前端页面部分
前端页面表格那块自然是
传统手艺，不需要多说了。值得注意的是下面这几个地方:
- 上传文件表单
上传文件表单里面有个Upload组件，这个比较特殊，我们需要手动上传，我也踩了很久的坑。
这里附上源码:
文章图片
这些几乎都是根据antd官网的例子来的，其中Form.Item套了2层，demo就是这么写的，我试了下去掉一个还不行。
valuePropName固定要是
fileList。
文章图片
- 上传文件的http请求
由于前端未使用axios这样的http请求库，而是umi-request（自己封装的）。
所以这边还是说明一下怎么使用:
文章图片
这是文件上传的方法，第一是要制造
FormData对象，并把文件数据append进去。第二个关键就是requestType要指定为
form，这2点我摸索了挺久。- 下载文件
用window.open或者a标签链接到我们的download接口接口:
window.open(${CONFIG.URL}/oss/download?filepath=${record.key})
- 全部代码
import {PageContainer} from "@ant-design/pro-layout";
import {Button, Card, Col, Divider, Form, Input, Modal, Row, Table, Upload} from "antd";
import {InboxOutlined, PlusOutlined} from "@ant-design/icons";
import {CONFIG} from "@/consts/config";
import {useEffect, useState} from "react";
import {connect} from 'umi';
import moment from "moment";
const Oss = ({loading, dispatch, gconfig}) => {const [form] = Form.useForm();
const {ossFileList, searchOssFileList} = gconfig;
const [visible, setVisible] = useState(false);
const [value, setValue] = useState('');
const onDeleteFile = key => {
dispatch({
type: 'gconfig/removeOssFile',
payload: {
filepath: key
}
})
}const listFile = () => {
dispatch({
type: 'gconfig/listOssFile',
})
}const columns = [
{
title: '文件路径',
key: 'key',
dataIndex: 'key',
render: key => {key}
},
{
title: '大小',
key: 'size',
dataIndex: 'size',
render: size => `${Math.round(size / 1024)}kb`
},
{
title: '更新时间',
key: 'last_modified',
dataIndex: 'last_modified',
render: lastModified => moment(lastModified * 1000).subtract(moment().utcOffset() / 60 - 8, 'hours').format('YYYY-MM-DD HH:mm:ss')},
{
title: '操作',
key: 'ops',
render: (record) => <>
{
window.open(`${CONFIG.URL}/oss/download?filepath=${record.key}`)
}}>下载{
onDeleteFile(record.key);
}}>删除
},
]
const normFile = (e) => {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
const onUpload = async () => {
const values = await form.validateFields();
const res = dispatch({
type: 'gconfig/uploadFile',
payload: values,
})
if (res) {
setVisible(false)
setValue('')
listFile();
}
}useEffect(() => {
if (value =https://www.it610.com/article/=='') {
dispatch({
type: 'gconfig/save',
payload: {searchOssFileList: ossFileList}
})
} else {
dispatch({
type: 'gconfig/save',
payload: {searchOssFileList: ossFileList.filter(v => v.key.toLowerCase().indexOf(value.toLowerCase()) > -1)}
})
}
}, [value])useEffect(() => {
listFile();
}, [])return (
setVisible(false)} onOk={onUpload}>
record.key} dataSource={searchOssFileList} columns={columns}
loading={loading.effects['gconfig/listOssFile']}/>
)
}export default connect(({loading, gconfig}) => ({loading, gconfig}))(Oss);
今天的内容就介绍到这里，如今我们已经可以通过oss去管理我们的文件了，那我们要怎么运用呢？
【测试平台系列(91)|测试平台系列(91) 编写oss管理页面】下一节给大家介绍，http请求支持文件上传功能。
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 基于kubernetes平台微服务的部署
- 七个程序员常用的接单平台推荐
- 学习笔记（带你十天轻松搞定|学习笔记：带你十天轻松搞定 Go 微服务系列（七）- RPC 服务 Auth 验证）
- Locust1.x 的监控平台——boomer
- 基于ElasticSearch的搜索平台在哈啰出行的应用
- Java|Java 数据结构与算法系列精讲之汉诺塔
- spring|spring boot 测试单元修改数据库不成功的解决
- 基于Java+SpringBoot+vue+element实现扶贫助农政策平台系统
- Windows原理深入学习系列-特权
- 图解机器学习算法 | 从入门到精通系列教程