完成删除文件功能
This commit is contained in:
宇阳
@@ -1,9 +1,8 @@
|
||||
import Request from '@/utils/request'
|
||||
import { File } from '@/types/app/file'
|
||||
import { ObjectToUrlParam } from '@/utils'
|
||||
|
||||
// 删除文件
|
||||
export const delFileDataAPI = (data: string[]) => Request<File>("DELETE", "/file", { files: data })
|
||||
export const delFileDataAPI = (filePath: string) => Request<File>("DELETE", `/file?filePath=${filePath}`)
|
||||
|
||||
// 获取文件
|
||||
export const getFileDataAPI = (filePath: string) => Request<File>("GET", `/file/info?filePath=${filePath}`)
|
||||
@@ -26,3 +25,6 @@ export const getFileListAPI = (data?: QueryData) => {
|
||||
return Request<File[]>("GET", `/file/all${sort}${dir}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取目录列表
|
||||
export const getDirListAPI = () => Request<string[]>("GET", '/file/dir');;
|
||||
@@ -22,7 +22,7 @@
|
||||
.ant-space-item {
|
||||
.anticon {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
color: #5d5d5d;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,39 +1,51 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Image, Card, Space, Spin } from 'antd'
|
||||
import { Image, Card, Space, Spin, message, Popconfirm } from 'antd'
|
||||
import Title from '@/components/Title'
|
||||
|
||||
import fileSvg from './image/file.svg'
|
||||
import { getFileListAPI } from '@/api/File'
|
||||
import { File, FileDir } from '@/types/app/file'
|
||||
import { delFileDataAPI, getDirListAPI, getFileListAPI } from '@/api/File'
|
||||
import { File } from '@/types/app/file'
|
||||
import { PiKeyReturnFill } from "react-icons/pi";
|
||||
import {
|
||||
DownloadOutlined,
|
||||
RotateLeftOutlined,
|
||||
RotateRightOutlined,
|
||||
SwapOutlined,
|
||||
UndoOutlined,
|
||||
ZoomInOutlined,
|
||||
ZoomOutOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { DeleteOutlined, DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons';
|
||||
import "./index.scss"
|
||||
|
||||
export default () => {
|
||||
const [active, setActive] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [dirList, setDirList] = useState<FileDir[]>(["default", "article", "swiper"])
|
||||
const [dirName, setDirName] = useState("")
|
||||
const [dirList, setDirList] = useState<string[]>([])
|
||||
const [fileList, setFileList] = useState<File[]>([])
|
||||
|
||||
// 获取目录列表
|
||||
const getDirList = async () => {
|
||||
setLoading(true)
|
||||
const { data } = await getDirListAPI()
|
||||
setDirList(data)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
// 获取指定目录的文件列表
|
||||
const getFileList = async (dir: string) => {
|
||||
setLoading(true)
|
||||
const { data } = await getFileListAPI({ dir })
|
||||
console.log(data);
|
||||
|
||||
if (!fileList.length && !(data as File[]).length) message.error("该目录中没有文件")
|
||||
|
||||
setFileList(data as File[])
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
const onDeleteImage = async (data: File) => {
|
||||
setLoading(true)
|
||||
await delFileDataAPI(`${dirName}/${data.name}`)
|
||||
message.success("🎉 删除图片成功")
|
||||
getFileList(dirName)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
// 下载图片
|
||||
const onDownload = (data: File) => {
|
||||
const onDownloadImage = (data: File) => {
|
||||
fetch(data.url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
@@ -48,8 +60,14 @@ export default () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 打开目录
|
||||
const openDir = (dir: string) => {
|
||||
setDirName(dir)
|
||||
getFileList(dir)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// getFileList()
|
||||
getDirList()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@@ -71,18 +89,33 @@ export default () => {
|
||||
fileList.length
|
||||
? (
|
||||
fileList.map((item, index) =>
|
||||
<div key={index} className={`group relative overflow-hidden w-44 h-44 p-2 flex flex-col items-center cursor-pointer mx-4 border-[2px] ${active === item.name ? 'border-primary' : 'border-[#eee]'} rounded-md`} onClick={() => setActive(item.name)}>
|
||||
<Image src={item.url} className='rounded-md object-cover object-center' preview={{
|
||||
<div
|
||||
key={index}
|
||||
className={`group relative overflow-hidden w-44 h-44 p-[2px] flex flex-col items-center cursor-pointer mx-4 border-2 ${active === item.name ? 'border-primary' : 'border-[#eee]'} rounded-md`}
|
||||
onClick={() => setActive(item.name)}>
|
||||
<Image
|
||||
src={item.url}
|
||||
className='rounded-md object-cover object-center'
|
||||
preview={{
|
||||
toolbarRender: (
|
||||
_,
|
||||
{
|
||||
image: { url },
|
||||
transform: { scale },
|
||||
actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset },
|
||||
},
|
||||
) => (
|
||||
<Space className="toolbar-wrapper">
|
||||
<DownloadOutlined onClick={() => onDownload(item)} />
|
||||
<Popconfirm
|
||||
title="警告"
|
||||
description="删除后无法恢复，确定要删除吗"
|
||||
onConfirm={() => onDeleteImage(item)}
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</Popconfirm>
|
||||
|
||||
<DownloadOutlined onClick={() => onDownloadImage(item)} />
|
||||
<SwapOutlined rotate={90} onClick={onFlipY} />
|
||||
<SwapOutlined onClick={onFlipX} />
|
||||
<RotateLeftOutlined onClick={onRotateLeft} />
|
||||
@@ -97,7 +130,10 @@ export default () => {
|
||||
)
|
||||
)
|
||||
: dirList.map((dir, index) => (
|
||||
<div key={index} className='group w-25 flex flex-col items-center cursor-pointer mx-4' onClick={() => getFileList(dir)}>
|
||||
<div
|
||||
key={index}
|
||||
className='group w-25 flex flex-col items-center cursor-pointer mx-4'
|
||||
onClick={() => openDir(dir)}>
|
||||
<img src={fileSvg} alt="" />
|
||||
<p className='group-hover:text-primary transition-colors'>{dir}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user