Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
admin
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
f5b48f8e
authored
May 02, 2025
by
YunaiV
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
reactor:【INFRA】文件上传 api,增加 directory 参数,去除 path 参数,并支持按照日期分目录、文件名不再使用 sha256 而是时间戳
parent
8c4e1b7c
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
29 additions
and
23 deletions
+29
-23
src/api/infra/file/index.ts
+4
-2
src/components/UploadFile/src/UploadFile.vue
+3
-2
src/components/UploadFile/src/UploadImg.vue
+3
-2
src/components/UploadFile/src/UploadImgs.vue
+3
-2
src/components/UploadFile/src/useUpload.ts
+16
-15
No files found.
src/api/infra/file/index.ts
View file @
f5b48f8e
...
@@ -8,6 +8,8 @@ export interface FilePresignedUrlRespVO {
...
@@ -8,6 +8,8 @@ export interface FilePresignedUrlRespVO {
uploadUrl
:
string
uploadUrl
:
string
// 文件 URL
// 文件 URL
url
:
string
url
:
string
// 文件路径
path
:
string
}
}
// 查询文件列表
// 查询文件列表
...
@@ -21,10 +23,10 @@ export const deleteFile = (id: number) => {
...
@@ -21,10 +23,10 @@ export const deleteFile = (id: number) => {
}
}
// 获取文件预签名地址
// 获取文件预签名地址
export
const
getFilePresignedUrl
=
(
path
:
string
)
=>
{
export
const
getFilePresignedUrl
=
(
name
:
string
,
directory
?
:
string
)
=>
{
return
request
.
get
<
FilePresignedUrlRespVO
>
({
return
request
.
get
<
FilePresignedUrlRespVO
>
({
url
:
'/infra/file/presigned-url'
,
url
:
'/infra/file/presigned-url'
,
params
:
{
path
}
params
:
{
name
,
directory
}
})
})
}
}
...
...
src/components/UploadFile/src/UploadFile.vue
View file @
f5b48f8e
...
@@ -86,7 +86,8 @@ const props = defineProps({
...
@@ -86,7 +86,8 @@ const props = defineProps({
autoUpload
:
propTypes
.
bool
.
def
(
true
),
// 自动上传
autoUpload
:
propTypes
.
bool
.
def
(
true
),
// 自动上传
drag
:
propTypes
.
bool
.
def
(
false
),
// 拖拽上传
drag
:
propTypes
.
bool
.
def
(
false
),
// 拖拽上传
isShowTip
:
propTypes
.
bool
.
def
(
true
),
// 是否显示提示
isShowTip
:
propTypes
.
bool
.
def
(
true
),
// 是否显示提示
disabled
:
propTypes
.
bool
.
def
(
false
)
// 是否禁用上传组件 ==> 非必传(默认为 false)
disabled
:
propTypes
.
bool
.
def
(
false
),
// 是否禁用上传组件 ==> 非必传(默认为 false)
directory
:
propTypes
.
string
.
def
(
undefined
)
// 上传目录 ==> 非必传(默认为 undefined)
})
})
// ========== 上传相关 ==========
// ========== 上传相关 ==========
...
@@ -95,7 +96,7 @@ const uploadList = ref<UploadUserFile[]>([])
...
@@ -95,7 +96,7 @@ const uploadList = ref<UploadUserFile[]>([])
const
fileList
=
ref
<
UploadUserFile
[]
>
([])
const
fileList
=
ref
<
UploadUserFile
[]
>
([])
const
uploadNumber
=
ref
<
number
>
(
0
)
const
uploadNumber
=
ref
<
number
>
(
0
)
const
{
uploadUrl
,
httpRequest
}
=
useUpload
()
const
{
uploadUrl
,
httpRequest
}
=
useUpload
(
props
.
directory
)
// 文件上传之前判断
// 文件上传之前判断
const
beforeUpload
:
UploadProps
[
'beforeUpload'
]
=
(
file
:
UploadRawFile
)
=>
{
const
beforeUpload
:
UploadProps
[
'beforeUpload'
]
=
(
file
:
UploadRawFile
)
=>
{
...
...
src/components/UploadFile/src/UploadImg.vue
View file @
f5b48f8e
...
@@ -79,7 +79,8 @@ const props = defineProps({
...
@@ -79,7 +79,8 @@ const props = defineProps({
width
:
propTypes
.
string
.
def
(
'150px'
),
// 组件宽度 ==> 非必传(默认为 150px)
width
:
propTypes
.
string
.
def
(
'150px'
),
// 组件宽度 ==> 非必传(默认为 150px)
borderradius
:
propTypes
.
string
.
def
(
'8px'
),
// 组件边框圆角 ==> 非必传(默认为 8px)
borderradius
:
propTypes
.
string
.
def
(
'8px'
),
// 组件边框圆角 ==> 非必传(默认为 8px)
showDelete
:
propTypes
.
bool
.
def
(
true
),
// 是否显示删除按钮
showDelete
:
propTypes
.
bool
.
def
(
true
),
// 是否显示删除按钮
showBtnText
:
propTypes
.
bool
.
def
(
true
)
// 是否显示按钮文字
showBtnText
:
propTypes
.
bool
.
def
(
true
),
// 是否显示按钮文字
directory
:
propTypes
.
string
.
def
(
undefined
)
// 上传目录 ==> 非必传(默认为 undefined)
})
})
const
{
t
}
=
useI18n
()
// 国际化
const
{
t
}
=
useI18n
()
// 国际化
const
message
=
useMessage
()
// 消息弹窗
const
message
=
useMessage
()
// 消息弹窗
...
@@ -99,7 +100,7 @@ const deleteImg = () => {
...
@@ -99,7 +100,7 @@ const deleteImg = () => {
emit
(
'update:modelValue'
,
''
)
emit
(
'update:modelValue'
,
''
)
}
}
const
{
uploadUrl
,
httpRequest
}
=
useUpload
()
const
{
uploadUrl
,
httpRequest
}
=
useUpload
(
props
.
directory
)
const
editImg
=
()
=>
{
const
editImg
=
()
=>
{
const
dom
=
document
.
querySelector
(
`#
${
uuid
.
value
}
.el-upload__input`
)
const
dom
=
document
.
querySelector
(
`#
${
uuid
.
value
}
.el-upload__input`
)
...
...
src/components/UploadFile/src/UploadImgs.vue
View file @
f5b48f8e
...
@@ -81,10 +81,11 @@ const props = defineProps({
...
@@ -81,10 +81,11 @@ const props = defineProps({
fileType
:
propTypes
.
array
.
def
([
'image/jpeg'
,
'image/png'
,
'image/gif'
]),
// 图片类型限制 ==> 非必传(默认为 ["image/jpeg", "image/png", "image/gif"])
fileType
:
propTypes
.
array
.
def
([
'image/jpeg'
,
'image/png'
,
'image/gif'
]),
// 图片类型限制 ==> 非必传(默认为 ["image/jpeg", "image/png", "image/gif"])
height
:
propTypes
.
string
.
def
(
'150px'
),
// 组件高度 ==> 非必传(默认为 150px)
height
:
propTypes
.
string
.
def
(
'150px'
),
// 组件高度 ==> 非必传(默认为 150px)
width
:
propTypes
.
string
.
def
(
'150px'
),
// 组件宽度 ==> 非必传(默认为 150px)
width
:
propTypes
.
string
.
def
(
'150px'
),
// 组件宽度 ==> 非必传(默认为 150px)
borderradius
:
propTypes
.
string
.
def
(
'8px'
)
// 组件边框圆角 ==> 非必传(默认为 8px)
borderradius
:
propTypes
.
string
.
def
(
'8px'
),
// 组件边框圆角 ==> 非必传(默认为 8px)
directory
:
propTypes
.
string
.
def
(
undefined
)
// 上传目录 ==> 非必传(默认为 undefined)
})
})
const
{
uploadUrl
,
httpRequest
}
=
useUpload
()
const
{
uploadUrl
,
httpRequest
}
=
useUpload
(
props
.
directory
)
const
fileList
=
ref
<
UploadUserFile
[]
>
([])
const
fileList
=
ref
<
UploadUserFile
[]
>
([])
const
uploadNumber
=
ref
<
number
>
(
0
)
const
uploadNumber
=
ref
<
number
>
(
0
)
...
...
src/components/UploadFile/src/useUpload.ts
View file @
f5b48f8e
import
*
as
FileApi
from
'@/api/infra/file'
import
*
as
FileApi
from
'@/api/infra/file'
import
CryptoJS
from
'crypto-js'
//
import CryptoJS from 'crypto-js'
import
{
UploadRawFile
,
UploadRequestOptions
}
from
'element-plus/es/components/upload/src/upload'
import
{
UploadRawFile
,
UploadRequestOptions
}
from
'element-plus/es/components/upload/src/upload'
import
axios
from
'axios'
import
axios
from
'axios'
...
@@ -10,7 +10,7 @@ export const getUploadUrl = (): string => {
...
@@ -10,7 +10,7 @@ export const getUploadUrl = (): string => {
return
import
.
meta
.
env
.
VITE_BASE_URL
+
import
.
meta
.
env
.
VITE_API_URL
+
'/infra/file/upload'
return
import
.
meta
.
env
.
VITE_BASE_URL
+
import
.
meta
.
env
.
VITE_API_URL
+
'/infra/file/upload'
}
}
export
const
useUpload
=
()
=>
{
export
const
useUpload
=
(
directory
?:
string
)
=>
{
// 后端上传地址
// 后端上传地址
const
uploadUrl
=
getUploadUrl
()
const
uploadUrl
=
getUploadUrl
()
// 是否使用前端直连上传
// 是否使用前端直连上传
...
@@ -22,7 +22,7 @@ export const useUpload = () => {
...
@@ -22,7 +22,7 @@ export const useUpload = () => {
// 1.1 生成文件名称
// 1.1 生成文件名称
const
fileName
=
await
generateFileName
(
options
.
file
)
const
fileName
=
await
generateFileName
(
options
.
file
)
// 1.2 获取文件预签名地址
// 1.2 获取文件预签名地址
const
presignedInfo
=
await
FileApi
.
getFilePresignedUrl
(
fileName
)
const
presignedInfo
=
await
FileApi
.
getFilePresignedUrl
(
fileName
,
directory
)
// 1.3 上传文件(不能使用 ElUpload 的 ajaxUpload 方法的原因:其使用的是 FormData 上传,Minio 不支持)
// 1.3 上传文件(不能使用 ElUpload 的 ajaxUpload 方法的原因:其使用的是 FormData 上传,Minio 不支持)
return
axios
return
axios
.
put
(
presignedInfo
.
uploadUrl
,
options
.
file
,
{
.
put
(
presignedInfo
.
uploadUrl
,
options
.
file
,
{
...
@@ -32,7 +32,7 @@ export const useUpload = () => {
...
@@ -32,7 +32,7 @@ export const useUpload = () => {
})
})
.
then
(()
=>
{
.
then
(()
=>
{
// 1.4. 记录文件信息到后端(异步)
// 1.4. 记录文件信息到后端(异步)
createFile
(
presignedInfo
,
fileName
,
options
.
file
)
createFile
(
presignedInfo
,
options
.
file
)
// 通知成功,数据格式保持与后端上传的返回结果一致
// 通知成功,数据格式保持与后端上传的返回结果一致
return
{
data
:
presignedInfo
.
url
}
return
{
data
:
presignedInfo
.
url
}
})
})
...
@@ -40,7 +40,7 @@ export const useUpload = () => {
...
@@ -40,7 +40,7 @@ export const useUpload = () => {
// 模式二:后端上传
// 模式二:后端上传
// 重写 el-upload httpRequest 文件上传成功会走成功的钩子,失败走失败的钩子
// 重写 el-upload httpRequest 文件上传成功会走成功的钩子,失败走失败的钩子
return
new
Promise
((
resolve
,
reject
)
=>
{
return
new
Promise
((
resolve
,
reject
)
=>
{
FileApi
.
updateFile
({
file
:
options
.
file
})
FileApi
.
updateFile
({
file
:
options
.
file
,
directory
})
.
then
((
res
)
=>
{
.
then
((
res
)
=>
{
if
(
res
.
code
===
0
)
{
if
(
res
.
code
===
0
)
{
resolve
(
res
)
resolve
(
res
)
...
@@ -67,11 +67,11 @@ export const useUpload = () => {
...
@@ -67,11 +67,11 @@ export const useUpload = () => {
* @param name 文件名称
* @param name 文件名称
* @param file 文件
* @param file 文件
*/
*/
function
createFile
(
vo
:
FileApi
.
FilePresignedUrlRespVO
,
name
:
string
,
file
:
UploadRawFile
)
{
function
createFile
(
vo
:
FileApi
.
FilePresignedUrlRespVO
,
file
:
UploadRawFile
)
{
const
fileVo
=
{
const
fileVo
=
{
configId
:
vo
.
configId
,
configId
:
vo
.
configId
,
url
:
vo
.
url
,
url
:
vo
.
url
,
path
:
name
,
path
:
vo
.
path
,
name
:
file
.
name
,
name
:
file
.
name
,
type
:
file
.
type
,
type
:
file
.
type
,
size
:
file
.
size
size
:
file
.
size
...
@@ -85,14 +85,15 @@ function createFile(vo: FileApi.FilePresignedUrlRespVO, name: string, file: Uplo
...
@@ -85,14 +85,15 @@ function createFile(vo: FileApi.FilePresignedUrlRespVO, name: string, file: Uplo
* @param file 要上传的文件
* @param file 要上传的文件
*/
*/
async
function
generateFileName
(
file
:
UploadRawFile
)
{
async
function
generateFileName
(
file
:
UploadRawFile
)
{
// 读取文件内容
// // 读取文件内容
const
data
=
await
file
.
arrayBuffer
()
// const data = await file.arrayBuffer()
const
wordArray
=
CryptoJS
.
lib
.
WordArray
.
create
(
data
)
// const wordArray = CryptoJS.lib.WordArray.create(data)
// 计算SHA256
// // 计算SHA256
const
sha256
=
CryptoJS
.
SHA256
(
wordArray
).
toString
()
// const sha256 = CryptoJS.SHA256(wordArray).toString()
// 拼接后缀
// // 拼接后缀
const
ext
=
file
.
name
.
substring
(
file
.
name
.
lastIndexOf
(
'.'
))
// const ext = file.name.substring(file.name.lastIndexOf('.'))
return
`
${
sha256
}${
ext
}
`
// return `${sha256}${ext}`
return
file
.
name
}
}
/**
/**
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment