nili
6 months ago
14 changed files with 298 additions and 179 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,124 @@ |
|||||
|
import { toMD5 } from '@/utils/encryptUtil'; |
||||
|
import OSS from 'ali-oss'; |
||||
|
import { message, Upload, UploadFile, UploadProps } from 'antd'; |
||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { getSts } from '../services/matrix/admin'; |
||||
|
|
||||
|
interface OSSUploadProps { |
||||
|
onUploadSuccess?: (fileUrl: string) => void; |
||||
|
onUploadError?: (error: any) => void; |
||||
|
} |
||||
|
|
||||
|
const OSSUploadDragger: React.FC<OSSUploadProps> = ({ onUploadSuccess, onUploadError }) => { |
||||
|
const [uploading, setUploading] = useState(false); |
||||
|
const [fileList, setFileList] = useState<UploadFile[]>([]); |
||||
|
const [ossClient, setOssClient] = useState<OSS | null>(null); |
||||
|
const { Dragger } = Upload; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
async function initOssClient() { |
||||
|
try { |
||||
|
const stsResponse = await getSts(); // 假设你有一个 getSTS 函数可以获取 STS 凭证
|
||||
|
if ( |
||||
|
!stsResponse.data || |
||||
|
!stsResponse.data.accessKeySecret || |
||||
|
!stsResponse.data.accessKeyId |
||||
|
) { |
||||
|
message.error('初始化失败，请稍后再试'); |
||||
|
return; |
||||
|
} |
||||
|
const client = new OSS({ |
||||
|
region: 'oss-cn-beijing', |
||||
|
accessKeyId: stsResponse.data.accessKeyId, |
||||
|
accessKeySecret: stsResponse.data.accessKeySecret, |
||||
|
stsToken: stsResponse.data.securityToken, |
||||
|
bucket: stsResponse.data.bucket, |
||||
|
}); |
||||
|
setOssClient(client); |
||||
|
} catch (error) { |
||||
|
message.error('初始化 OSS 客户端失败'); |
||||
|
if (onUploadError) { |
||||
|
onUploadError(error); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
initOssClient(); |
||||
|
}, [onUploadError]); |
||||
|
|
||||
|
const onRemove = (file: UploadFile) => { |
||||
|
const files = (fileList || []).filter((v) => v.url !== file.url); |
||||
|
setFileList(files); |
||||
|
}; |
||||
|
|
||||
|
const handleUpload: UploadProps['customRequest'] = async (options) => { |
||||
|
const { file } = options; |
||||
|
if (file instanceof File) { |
||||
|
setUploading(true); |
||||
|
|
||||
|
try { |
||||
|
const md5 = await toMD5(file); |
||||
|
const fileName = `matrix/${md5}.${file.name.split('.').pop()}`; |
||||
|
await ossClient?.put(fileName, file, { |
||||
|
headers: { |
||||
|
'Content-Type': file.type, |
||||
|
}, |
||||
|
}); |
||||
|
const fileUrl = `https://apks.bzgames.cn/${fileName}`; |
||||
|
|
||||
|
if (onUploadSuccess) { |
||||
|
onUploadSuccess(fileUrl); |
||||
|
} |
||||
|
setUploading(false); |
||||
|
// 将上传成功的文件信息添加到 fileList
|
||||
|
setFileList((prevFileList) => [ |
||||
|
...prevFileList, |
||||
|
{ |
||||
|
uid: file.uid, |
||||
|
name: file.name + '：' + fileUrl, |
||||
|
status: 'done', |
||||
|
url: fileUrl, |
||||
|
}, |
||||
|
]); |
||||
|
} catch (error) { |
||||
|
message.error('文件上传失败'); |
||||
|
if (onUploadError) { |
||||
|
onUploadError(error); |
||||
|
} |
||||
|
setFileList((prevFileList) => [ |
||||
|
...prevFileList, |
||||
|
{ |
||||
|
uid: file.uid, |
||||
|
name: file.name, |
||||
|
status: 'error', |
||||
|
}, |
||||
|
]); |
||||
|
} finally { |
||||
|
setUploading(false); |
||||
|
} |
||||
|
} else { |
||||
|
message.error('上传文件类型错误'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<Dragger |
||||
|
fileList={fileList} |
||||
|
multiple |
||||
|
customRequest={handleUpload} |
||||
|
onRemove={onRemove} |
||||
|
disabled={uploading || !ossClient} |
||||
|
onPreview={async (file) => { |
||||
|
await navigator.clipboard.writeText(file.url || ''); |
||||
|
message.success('链接复制成功 ' + file.url); |
||||
|
}} |
||||
|
> |
||||
|
<p className="ant-upload-drag-icon"> |
||||
|
<i className="anticon anticon-inbox" /> |
||||
|
</p> |
||||
|
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p> |
||||
|
<p className="ant-upload-hint">支持单个或批量上传。文件名将使用文件的 MD5 值命名。</p> |
||||
|
</Dragger> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default OSSUploadDragger; |
||||
Loading…
Reference in new issue