📖 CRM：code review 前端直接上传

.env.local

@@ -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'

src/api/infra/file/index.ts

@@ -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 }
   })
   })
 }
 }
 
 

src/components/UploadFile/src/useUpload.ts

@@ -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)
     }
     }
   }
   }