root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📖 CRM：code review 前端直接上传

Browse Source
This commit is contained in:
YunaiV 2024-02-17 20:35:35 +08:00
parent ffeaa891df
commit d3fab9a0fd
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@ -6,7 +6,7 @@ VITE_DEV=true
# 请求路径 # 请求路径
VITE_BASE_URL='http://localhost:48080' VITE_BASE_URL='http://localhost:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server VITE_UPLOAD_TYPE=server
# 上传路径 # 上传路径
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload' VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'

4
src/api/infra/file/index.ts
View File

@ -27,10 +27,10 @@ export const deleteFile = (id: number) => {
} }
// 获取文件预签名地址 // 获取文件预签名地址
export const getFilePresignedUrl = (fileName: string) => { export const getFilePresignedUrl = (path: string) => {
return request.get<FilePresignedUrlRespVO>({ return request.get<FilePresignedUrlRespVO>({
url: '/infra/file/presigned-url', url: '/infra/file/presigned-url',
params: { fileName } params: { path }
}) })
} }

6
src/components/UploadFile/src/useUpload.ts
View File

@ -18,9 +18,9 @@ export const useUpload = () => {
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)
// 1.3 上传文件（不能使用ElUpload的ajaxUpload方法的原因：其使用的是FormData上传，Minio不支持） // 1.3 上传文件（不能使用 ElUpload 的 ajaxUpload 方法的原因：其使用的是 FormData 上传，Minio 不支持）
return axios.put(presignedInfo.uploadUrl, options.file).then(() => { return axios.put(presignedInfo.uploadUrl, options.file).then(() => {
// 1.4. 记录文件信息到后端 // 1.4. 记录文件信息到后端（异步）
createFile(presignedInfo, fileName, options.file) createFile(presignedInfo, fileName, options.file)
// 通知成功，数据格式保持与后端上传的返回结果一致 // 通知成功，数据格式保持与后端上传的返回结果一致
return { data: presignedInfo.url } return { data: presignedInfo.url }
@ -29,7 +29,7 @@ export const useUpload = () => {
// 模式二：后端上传（需要增加后端身份认证请求头） // 模式二：后端上传（需要增加后端身份认证请求头）
options.headers['Authorization'] = 'Bearer ' + getAccessToken() options.headers['Authorization'] = 'Bearer ' + getAccessToken()
options.headers['tenant-id'] = getTenantId() options.headers['tenant-id'] = getTenantId()
// 使用ElUpload的上传方法 // 使用 ElUpload 的上传方法
return ajaxUpload(options) return ajaxUpload(options)
} }
} }