diff --git a/src/api/infra/file/index.ts b/src/api/infra/file/index.ts index c70e3c3e..5c042393 100644 --- a/src/api/infra/file/index.ts +++ b/src/api/infra/file/index.ts @@ -8,6 +8,8 @@ export interface FilePresignedUrlRespVO { uploadUrl: string // 文件 URL url: string + // 文件路径 + path: string } // 查询文件列表 @@ -21,10 +23,10 @@ export const deleteFile = (id: number) => { } // 获取文件预签名地址 -export const getFilePresignedUrl = (path: string) => { +export const getFilePresignedUrl = (name: string, directory?: string) => { return request.get({ url: '/infra/file/presigned-url', - params: { path } + params: { name, directory } }) } diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 9d0a904e..17540862 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -86,7 +86,8 @@ const props = defineProps({ autoUpload: propTypes.bool.def(true), // 自动上传 drag: propTypes.bool.def(false), // 拖拽上传 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([]) const fileList = ref([]) const uploadNumber = ref(0) -const { uploadUrl, httpRequest } = useUpload() +const { uploadUrl, httpRequest } = useUpload(props.directory) // 文件上传之前判断 const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue index ac0c162d..66e9d0c9 100644 --- a/src/components/UploadFile/src/UploadImg.vue +++ b/src/components/UploadFile/src/UploadImg.vue @@ -79,7 +79,8 @@ const props = defineProps({ width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传(默认为 150px) borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传(默认为 8px) 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 message = useMessage() // 消息弹窗 @@ -99,7 +100,7 @@ const deleteImg = () => { emit('update:modelValue', '') } -const { uploadUrl, httpRequest } = useUpload() +const { uploadUrl, httpRequest } = useUpload(props.directory) const editImg = () => { const dom = document.querySelector(`#${uuid.value} .el-upload__input`) diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue index 59857a98..3f2fd11a 100644 --- a/src/components/UploadFile/src/UploadImgs.vue +++ b/src/components/UploadFile/src/UploadImgs.vue @@ -81,10 +81,11 @@ const props = defineProps({ fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传(默认为 ["image/jpeg", "image/png", "image/gif"]) height: 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([]) const uploadNumber = ref(0) diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index 2981e12d..951b2397 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -1,5 +1,5 @@ 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 axios from 'axios' @@ -10,7 +10,7 @@ export const getUploadUrl = (): string => { 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() // 是否使用前端直连上传 @@ -22,7 +22,7 @@ export const useUpload = () => { // 1.1 生成文件名称 const fileName = await generateFileName(options.file) // 1.2 获取文件预签名地址 - const presignedInfo = await FileApi.getFilePresignedUrl(fileName) + const presignedInfo = await FileApi.getFilePresignedUrl(fileName, directory) // 1.3 上传文件(不能使用 ElUpload 的 ajaxUpload 方法的原因:其使用的是 FormData 上传,Minio 不支持) return axios .put(presignedInfo.uploadUrl, options.file, { @@ -32,7 +32,7 @@ export const useUpload = () => { }) .then(() => { // 1.4. 记录文件信息到后端(异步) - createFile(presignedInfo, fileName, options.file) + createFile(presignedInfo, options.file) // 通知成功,数据格式保持与后端上传的返回结果一致 return { data: presignedInfo.url } }) @@ -40,7 +40,7 @@ export const useUpload = () => { // 模式二:后端上传 // 重写 el-upload httpRequest 文件上传成功会走成功的钩子,失败走失败的钩子 return new Promise((resolve, reject) => { - FileApi.updateFile({ file: options.file }) + FileApi.updateFile({ file: options.file, directory }) .then((res) => { if (res.code === 0) { resolve(res) @@ -67,11 +67,11 @@ export const useUpload = () => { * @param name 文件名称 * @param file 文件 */ -function createFile(vo: FileApi.FilePresignedUrlRespVO, name: string, file: UploadRawFile) { +function createFile(vo: FileApi.FilePresignedUrlRespVO, file: UploadRawFile) { const fileVo = { configId: vo.configId, url: vo.url, - path: name, + path: vo.path, name: file.name, type: file.type, size: file.size @@ -85,14 +85,15 @@ function createFile(vo: FileApi.FilePresignedUrlRespVO, name: string, file: Uplo * @param file 要上传的文件 */ async function generateFileName(file: UploadRawFile) { - // 读取文件内容 - const data = await file.arrayBuffer() - const wordArray = CryptoJS.lib.WordArray.create(data) - // 计算SHA256 - const sha256 = CryptoJS.SHA256(wordArray).toString() - // 拼接后缀 - const ext = file.name.substring(file.name.lastIndexOf('.')) - return `${sha256}${ext}` + // // 读取文件内容 + // const data = await file.arrayBuffer() + // const wordArray = CryptoJS.lib.WordArray.create(data) + // // 计算SHA256 + // const sha256 = CryptoJS.SHA256(wordArray).toString() + // // 拼接后缀 + // const ext = file.name.substring(file.name.lastIndexOf('.')) + // return `${sha256}${ext}` + return file.name } /**