69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div class="card card-dash shadow-xl w-90 h-60">
|
|
<div class="card-body flex">
|
|
|
|
<!-- Title -->
|
|
<h1 class="card-title place-self-center font-bold text-2xl">上传比特流文件</h1>
|
|
|
|
<!-- Input File -->
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
|
|
<input type="file" class="file-input" @change="handleFileChange" />
|
|
<label class="fieldset-label">Max size 2MB</label>
|
|
</fieldset>
|
|
|
|
<!-- Upload Button -->
|
|
<div class="card-actions">
|
|
<button @click="uploadBitStream" class="btn btn-primary grow">上传</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { client } from '@/client';
|
|
import { TRPCClientError } from '@trpc/client';
|
|
|
|
var bitstream = null;
|
|
|
|
function handleFileChange(event: Event): void {
|
|
const target = event.target as HTMLInputElement;
|
|
const file = target.files?.[0]; // 获取选中的第一个文件
|
|
|
|
if (!file) {
|
|
console.error('未选择文件');
|
|
return;
|
|
}
|
|
|
|
bitstream = file;
|
|
|
|
console.log(bitstream);
|
|
}
|
|
|
|
async function uploadBitStream() {
|
|
try {
|
|
const serverStatus = await client.api.status.query();
|
|
if (serverStatus != "OK") {
|
|
throw new Error("Server Busy...")
|
|
}
|
|
|
|
} catch (error) {
|
|
if (error instanceof TRPCClientError) {
|
|
console.error("Can't connect to Server!")
|
|
} else {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function checkFileType(file: File) {
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
@import "../assets/main.css";
|
|
</style>
|