|
|
@@ -11,10 +11,18 @@
|
|
|
<h4>支持jpg, png, bmp, pdf等文件格式</h4>
|
|
|
</el-row>
|
|
|
<div class="common-layout">
|
|
|
- <el-container>
|
|
|
- <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
|
|
|
- <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
|
|
|
- </el-container>
|
|
|
+ <el-upload class="upload-demo" drag :before-upload="beforeUpload" multiple>
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ Drop file here or <em>click to upload</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ {{ fileName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
|
|
|
</div>
|
|
|
<div v-show="is_pdf">
|
|
|
<el-row>
|
|
|
@@ -81,6 +89,7 @@ import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
|
|
|
import {
|
|
|
ArrowLeft,
|
|
|
ArrowRight,
|
|
|
+ UploadFilled
|
|
|
} from '@element-plus/icons-vue'
|
|
|
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
@@ -99,6 +108,8 @@ const is_pdf = ref(false);
|
|
|
const pdf_page = ref(1);
|
|
|
const pdf_img: any = ref("")
|
|
|
|
|
|
+const input_file = ref(null as unknown as File)
|
|
|
+
|
|
|
const state = reactive({
|
|
|
source: "", //预览pdf文件地址
|
|
|
pageNum: 1, //当前页面
|
|
|
@@ -210,7 +221,7 @@ async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
|
|
|
let loading = ref(false)
|
|
|
let show_predict = ref(false)
|
|
|
let predictTime = ref(0)
|
|
|
-const fileName = ref(null);
|
|
|
+const fileName = ref(null as unknown as string);
|
|
|
const canvas = ref(null as unknown as HTMLCanvasElement);
|
|
|
const img_canvas = ref(null as unknown as HTMLCanvasElement);
|
|
|
let figureSelectedItem = ref(-1)
|
|
|
@@ -238,53 +249,45 @@ onMounted(async () => {
|
|
|
img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
|
|
|
});
|
|
|
|
|
|
-const uploadImg = () => {
|
|
|
- /**
|
|
|
- * 这里由于操作是绑定在 el-input 上；因此需要在内部重新获取 input 再拿到 file
|
|
|
- */
|
|
|
- const reader = new FileReader();
|
|
|
- // 用于展示
|
|
|
+const beforeUpload = (file: File): boolean | Promise<boolean> => {
|
|
|
+ if (fa_canvas != null) {
|
|
|
+ fa_canvas.dispose();
|
|
|
+ fa_canvas = null;
|
|
|
+ }
|
|
|
+
|
|
|
const showImg = document.getElementById("show-img") as HTMLImageElement;
|
|
|
- const inputElement = document
|
|
|
- .getElementsByClassName("el-input")[0]
|
|
|
- .getElementsByTagName("input")[0];
|
|
|
|
|
|
- try {
|
|
|
- const file = inputElement.files![0];
|
|
|
- reader.onload = () => {
|
|
|
- const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
- fa_canvas ? fa_canvas.clear() : 0;
|
|
|
- if (post_ == ".pdf") {
|
|
|
- state.pageNum = 1;
|
|
|
- state.source = URL.createObjectURL(file);
|
|
|
- is_pdf.value = true
|
|
|
- loadingTask = createLoadingTask(state.source);
|
|
|
- getPdfImage(state.pageNum);
|
|
|
- } else
|
|
|
- if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
- showImg.src = URL.createObjectURL(file);
|
|
|
- showImg.onload = () => {
|
|
|
- canvas.value.width = showImg.width;
|
|
|
- canvas.value.height = showImg.height;
|
|
|
- fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
- figure_rects.splice(0)
|
|
|
- table_rects.splice(0)
|
|
|
- figureSelectedItem.value = -1;
|
|
|
- tableSelectedItem.value = -1;
|
|
|
- }
|
|
|
- is_pdf.value = false
|
|
|
- } else {
|
|
|
- alert('不支持的文件格式！')
|
|
|
- fileName.value = null
|
|
|
- }
|
|
|
- };
|
|
|
- reader.readAsDataURL(file);
|
|
|
- } catch (err) {
|
|
|
- console.error(err);
|
|
|
- }
|
|
|
+ const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
|
|
|
+ if (post_ == ".pdf") {
|
|
|
+ state.pageNum = 1;
|
|
|
+ state.source = URL.createObjectURL(file);
|
|
|
+ is_pdf.value = true
|
|
|
+ loadingTask = createLoadingTask(state.source);
|
|
|
+ getPdfImage(state.pageNum);
|
|
|
+ } else
|
|
|
+ if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
|
|
|
+ showImg.src = URL.createObjectURL(file);
|
|
|
+ input_file.value = file
|
|
|
+ showImg.onload = () => {
|
|
|
+ canvas.value.width = showImg.width;
|
|
|
+ canvas.value.height = showImg.height;
|
|
|
+ fa_canvas = new fabric.Canvas(canvas.value);
|
|
|
+ figure_rects.splice(0)
|
|
|
+ table_rects.splice(0)
|
|
|
+ figureSelectedItem.value = -1;
|
|
|
+ tableSelectedItem.value = -1;
|
|
|
+ }
|
|
|
+ is_pdf.value = false
|
|
|
+ } else {
|
|
|
+ alert('不支持的文件格式！')
|
|
|
+ fileName.value = ''
|
|
|
+ }
|
|
|
+ fileName.value = file.name
|
|
|
+
|
|
|
if (show_predict.value === true)
|
|
|
show_predict.value = !show_predict.value;
|
|
|
-};
|
|
|
+ return true
|
|
|
+}
|
|
|
|
|
|
type RectWithId = fabric.Rect & { id: number };
|
|
|
|
|
|
@@ -306,7 +309,7 @@ function CreateRect(canvas: any, i: number, left: number, top: number, width: nu
|
|
|
}
|
|
|
|
|
|
const predict = async () => {
|
|
|
- if (fileName.value == undefined) {
|
|
|
+ if (fileName.value == undefined || fileName.value == '') {
|
|
|
alert('请上传图片！')
|
|
|
return;
|
|
|
}
|
|
|
@@ -316,10 +319,6 @@ const predict = async () => {
|
|
|
table_rects.splice(0)
|
|
|
|
|
|
const img = document.getElementById("show-img") as HTMLImageElement;
|
|
|
- const inputElement = document
|
|
|
- .getElementsByClassName("el-input")[0]
|
|
|
- .getElementsByTagName("input")[0];
|
|
|
- const file = inputElement.files![0];
|
|
|
|
|
|
loading.value = !loading.value
|
|
|
var data = new FormData();
|
|
|
@@ -379,7 +378,7 @@ const predict = async () => {
|
|
|
});
|
|
|
})
|
|
|
} else {
|
|
|
- data.append('image', file);
|
|
|
+ data.append('image', input_file.value);
|
|
|
|
|
|
Detection(api, data).then(res => {
|
|
|
console.log(res.code)
|
