基础设施:增加前端直连上传文件到S3服务的功能

This commit is contained in:
owen
2024-02-04 19:41:48 +08:00
parent 64cfcbf6e0
commit 490bb901e1
12 changed files with 152 additions and 41 deletions

View File

@ -3,16 +3,16 @@
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
:action="url"
:action="uploadUrl"
:auto-upload="false"
:data="data"
:disabled="formLoading"
:headers="uploadHeaders"
:limit="1"
:on-change="handleFileChange"
:on-error="submitFormError"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
:http-request="httpRequest"
accept=".jpg, .png, .gif"
drag
>
@ -31,7 +31,7 @@
</Dialog>
</template>
<script lang="ts" setup>
import { getAccessToken, getTenantId } from '@/utils/auth'
import { useUpload } from '@/components/UploadFile/src/useUpload'
defineOptions({ name: 'InfraFileForm' })
@ -40,12 +40,12 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const url = import.meta.env.VITE_UPLOAD_URL
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
const data = ref({ path: '' })
const uploadRef = ref()
const { uploadUrl, httpRequest } = useUpload()
/** 打开弹窗 */
const open = async () => {
dialogVisible.value = true
@ -64,11 +64,6 @@ const submitFileForm = () => {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
unref(uploadRef)?.submit()
}

View File

@ -70,8 +70,17 @@
preview-teleported
fit="cover"
/>
<el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url" :underline="false" target="_blank">预览</el-link>
<el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank">下载</el-link>
<el-link
v-else-if="row.type.includes('pdf')"
type="primary"
:href="row.url"
:underline="false"
target="_blank"
>预览</el-link
>
<el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
>下载</el-link
>
</template>
</el-table-column>
<el-table-column