feat: 添加头文件信息，添加图床工具。
This commit is contained in:
539943419 committed
1 parent
f8fba79d55
commit
fda826a272
12 files changed
+515
-13
No files matched your search
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="imgBed-wrapper">
|
||||
<div class="imgBed-wrapper-upload">
|
||||
<el-upload class="imgBed-wrapper-upload-el" :auto-upload="false" v-model="fileList"
|
||||
action="/api/tools/imgBed/upload" ref="uploadRef" :headers="headers" drag :data="data"
|
||||
@success="handleSuccess">
|
||||
<template #trigger>
|
||||
<div class="imgBed-upload">
|
||||
<upload class="imgBed-upload-icon"></upload>
|
||||
<el-text style="margin: 0;">拖拽 图片 至此<br />或单击此处选择文件</el-text>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-row>
|
||||
<el-col :span="17">
|
||||
<el-input v-model="expire" placeholder="有效期(小时)" style="width: 100%;">
|
||||
<template #prepend>过期时间（小时）</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="7" class="flex-end">
|
||||
<el-button type="primary" @click="handleUpload">
|
||||
点击上传图片
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column show-overflow-tooltip prop="name" label="文件名" />
|
||||
<el-table-column prop="expire" label="过期时间" width="180" />
|
||||
<el-table-column fixed="right" prop="share" label="操作" width="180">
|
||||
<template #default="scoped">
|
||||
<el-button link type="primary" size="small" @click="handleDownload(scoped.row)">
|
||||
下载
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleShare(scoped.row)">分享</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog v-model="showShareDialog" title="分享链接">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<img :src="shareDialogData.img" alt="shareQRCodeBase64" />
|
||||
<div style="max-width: 80%;">
|
||||
<span>{{ shareDialogData.url }}</span>
|
||||
<span>
|
||||
<copy style="width: 15px; margin-left: 4px; transform: translateY(3px); cursor: pointer;" @click="handleCopyUrl(shareDialogData.url)"></copy>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UploadInstance } from 'element-plus';
|
||||
import upload from '~/components/icons/upload.vue';
|
||||
import copy from '~/components/icons/copy.vue';
|
||||
// @ts-ignore
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
const fileList = ref([])
|
||||
const headers = reactive({
|
||||
Authorization: ``
|
||||
})
|
||||
const uploadRef = ref<UploadInstance>()
|
||||
|
||||
const tableData = reactive<{
|
||||
name: string;
|
||||
expire: string;
|
||||
hash: string;
|
||||
}[]>([])
|
||||
|
||||
const showShareDialog = ref(false)
|
||||
|
||||
const shareDialogData = ref({
|
||||
img: '',
|
||||
url: '',
|
||||
})
|
||||
|
||||
const expire = ref(1)
|
||||
|
||||
const data = computed(() => {
|
||||
return {
|
||||
expire: expire.value * 3600 * 1000
|
||||
}
|
||||
})
|
||||
|
||||
const handleUpload = () => {
|
||||
uploadRef.value!.submit()
|
||||
}
|
||||
|
||||
const handleSuccess = (res: {
|
||||
code: number;
|
||||
fileName: string;
|
||||
expire: number;
|
||||
hash: string;
|
||||
fileSize: number;
|
||||
}) => {
|
||||
if (res.code === 200) {
|
||||
const data = {
|
||||
name: res.fileName,
|
||||
expire: formatDate(new Date(Number(res.expire)), 'yyyy-MM-dd HH:mm:ss'),
|
||||
expireDate: Number(res.expire),
|
||||
hash: res.hash,
|
||||
}
|
||||
tableData.push(data)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = (row: {
|
||||
name: string;
|
||||
hash: string;
|
||||
}) => {
|
||||
const url = `/api/tools/imgBed/download/${row.hash}`
|
||||
const a = document.createElement('a')
|
||||
a.download = row.name
|
||||
a.href = url
|
||||
a.click()
|
||||
}
|
||||
|
||||
const handleShare = async (row: {
|
||||
name: string;
|
||||
hash: string;
|
||||
}) => {
|
||||
const url = `${location.origin}/api/tools/imgBed/download/${row.hash}`
|
||||
const data = await QRCode.toDataURL(url)
|
||||
shareDialogData.value = {
|
||||
img: data,
|
||||
url: url,
|
||||
}
|
||||
showShareDialog.value = true
|
||||
}
|
||||
|
||||
const handleCopyUrl = async (url: string) => {
|
||||
await navigator.clipboard.writeText(url)
|
||||
ElMessage.success('复制成功')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const record = localStorage.getItem('miaoTool-imgBed-uploadRecord')
|
||||
if (record) {
|
||||
let _record = JSON.parse(record)
|
||||
// console.log({ _record, record })
|
||||
_record = _record.filter((item: { expireDate: number }) => {
|
||||
return item.expireDate && item.expireDate > Date.now()
|
||||
})
|
||||
tableData.push(..._record)
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
localStorage.setItem('miaoTool-imgBed-uploadRecord', JSON.stringify(tableData))
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.imgBed-wrapper {
|
||||
// box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
padding: 20px 0 0 0;
|
||||
width: 100%;
|
||||
// height: calc(100vh - 60px);
|
||||
// max-height: calc(100vh - 60px);
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&-upload {
|
||||
width: 95%;
|
||||
|
||||
&-el {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgBed-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
|
||||
&-icon {
|
||||
display: block;
|
||||
width: 45px;
|
||||
color: #595959;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user