fix: frontend upload bitstream failed

src/Common.ts

@@ -3,6 +3,8 @@ import { isNull, isUndefined } from "lodash";
 
 export namespace Common {
   export function toFileParameter(object: File): FileParameter {
+    if (isNull(object) || isUndefined(object))
+      throw new Error("File is Null or Undefined");
     return {
       data: object,
       fileName: object.name

src/components/UploadCard.vue

@@ -31,10 +31,9 @@ import { useDialogStore } from "@/stores/dialog";
 import { isNull, isUndefined } from "lodash";
 
 interface Props {
-  uploadEvent?: Function;
+  uploadEvent?: (file: File) => Promise<boolean>;
-  downloadEvent?: Function;
+  downloadEvent?: () => Promise<boolean>;
   maxMemory?: number;
-  defaultFile?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,7 +52,10 @@ const buttonText = computed(() => {
 });
 
 const fileInput = useTemplateRef("fileInput");
-const bitstream = defineModel<File | undefined>();
+const bitstream = defineModel("bitstreamFile", {
+  type: File,
+  default: undefined,
+});
 onMounted(() => {
   if (!isUndefined(bitstream.value) && !isNull(fileInput.value)) {
     let fileList = new DataTransfer();
@@ -94,10 +96,10 @@ async function handleClick(event: Event): Promise<void> {
     return;
   }
 
-  // Upload - 修改这里，传递bitstream.value而不是bitstream
   isUploading.value = true;
   try {
-    const ret = await props.uploadEvent(event, bitstream.value);
+    const ret = await props.uploadEvent(bitstream.value);
+    console.debug(`After upload bistream: ${bitstream.value}, result: ${ret}`);
     if (isUndefined(props.downloadEvent)) {
       if (ret) {
         dialog.info("上传成功");
@@ -105,6 +107,10 @@ async function handleClick(event: Event): Promise<void> {
       } else dialog.error("上传失败");
       return;
     }
+    if (!ret) {
+      isUploading.value = false;
+      return;
+    }
   } catch (e) {
     dialog.error("上传失败");
     console.error(e);

src/components/equipments/MotherBoard.vue

@@ -10,15 +10,15 @@
     </svg>
   </div>
   <Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId">
-    <MotherBoardCaps :jtagAddr="eqps.boardAddr" :jtagPort="eqps.boardPort.toString()" />
+    <MotherBoardCaps :jtagAddr="props.boardAddr" :jtagPort="toNumber(props.boardPort)" />
   </Teleport>
 </template>
 
 <script setup lang="tsx">
 import MotherBoardCaps from "./MotherBoardCaps.vue";
-import { useEquipments } from "@/stores/equipments";
 import { ref, computed, watchEffect, inject } from "vue";
 import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
+import { toNumber } from "lodash";
 
 // 主板特有属性
 export interface MotherBoardProps {
@@ -39,16 +39,6 @@ const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
 const width = computed(() => 800 * props.size);
 const height = computed(() => 600 * props.size);
 
-// Global store
-const eqps = useEquipments();
-
-const bitstreamFile = ref<File | null>();
-
-watchEffect(() => {
-  eqps.setAddr(props.boardAddr);
-  eqps.setPort(props.boardPort);
-});
-
 // 向外暴露方法
 defineExpose({
   getInfo: () => ({

src/components/equipments/MotherBoardCaps.vue

@@ -3,7 +3,7 @@
     <h1 class="font-bold text-center text-2xl">Jtag</h1>
     <div class="flex flex-col">
       <p class="grow">Jtag Addr: {{ props.jtagAddr }}</p>
-      <p class="grow">Jtag Port: {{ props.jtagPort }}</p>
+      <p class="grow">Jtag Port: {{ props.jtagPort?.toString() }}</p>
       <div class="flex justify-between grow">
         <p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p>
         <button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
@@ -17,7 +17,8 @@
       </div>
     </div>
     <div class="divider"></div>
-    <UploadCard class="bg-base-200" :upload-event="uploadBitstream" :download-event="downloadBitstream">
+    <UploadCard class="bg-base-200" :upload-event="uploadBitstream" :download-event="downloadBitstream"
+      :bitstream-file="eqps.jtagBitstream" @update:bitstream-file="handleBitstreamChange">
     </UploadCard>
     <div class="divider"></div>
     <button class="btn w-full btn-primary" :class="isEnableJtagBoundaryScan ? '' : 'btn-soft'"
@@ -32,16 +33,15 @@ import { JtagClient } from "@/APIClient";
 import z from "zod";
 import UploadCard from "@/components/UploadCard.vue";
 import { useDialogStore } from "@/stores/dialog";
-import {
+import { Common } from "@/Common";
-  useConstraintsStore,
+import { useEquipments } from "@/stores/equipments";
-  type ConstraintLevel,
+import { useConstraintsStore } from "@/stores/constraints";
-} from "@/stores/constraints";
+import { isUndefined } from "lodash";
-import { isUndefined, toNumber } from "lodash";
+import { ref, watchEffect } from "vue";
-import { ref, computed, watch } from "vue";
 
 interface CapsProps {
   jtagAddr?: string;
-  jtagPort?: string;
+  jtagPort?: number;
 }
 
 const props = withDefaults(defineProps<CapsProps>(), {});
@@ -49,16 +49,17 @@ const props = withDefaults(defineProps<CapsProps>(), {});
 // Global Stores
 const dialog = useDialogStore();
 const constrainsts = useConstraintsStore();
+const eqps = useEquipments();
 
 const jtagController = new JtagClient();
 const isEnableJtagBoundaryScan = ref(false);
 
 // 使用传入的属性或默认值
 const jtagIDCode = ref(0);
-const boardAddress = computed(() => props.jtagAddr);
+
-const boardPort = computed(() =>
+function handleBitstreamChange(file: File | undefined) {
-  isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort),
+  eqps.jtagBitstream = file;
-);
+}
 
 async function toggleJtagBoundaryScan() {
   isEnableJtagBoundaryScan.value = !isEnableJtagBoundaryScan.value;
@@ -68,8 +69,8 @@ async function toggleJtagBoundaryScan() {
 async function jtagBoundaryScan() {
   try {
     const portStates = await jtagController.boundaryScanLogicalPorts(
-      boardAddress.value,
+      props.jtagAddr,
-      boardPort.value,
+      props.jtagPort,
     );
 
     constrainsts.batchSetConstraintStates(portStates);
@@ -78,75 +79,78 @@ async function jtagBoundaryScan() {
     console.error(error);
     isEnableJtagBoundaryScan.value = false;
   } finally {
-    if (isEnableJtagBoundaryScan.value) setTimeout(jtagBoundaryScan, 100);
+    if (isEnableJtagBoundaryScan.value) setTimeout(jtagBoundaryScan, 50);
   }
 }
 
-async function uploadBitstream(event: Event, bitstream: File) {
+async function uploadBitstream(bitstream: File): Promise<boolean> {
-  if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) {
+  if (isUndefined(props.jtagAddr) || isUndefined(props.jtagPort)) {
     dialog.error("开发板地址或端口空缺");
-    return;
+    return false;
   }
 
-  const fileParam = {
-    data: bitstream,
-    fileName: bitstream.name,
-  };
-
   try {
+    console.debug(`Before upload bistream: ${bitstream}`);
     const resp = await jtagController.uploadBitstream(
-      boardAddress.value,
+      props.jtagAddr,
-      fileParam,
+      Common.toFileParameterOrNull(bitstream),
-    );
-    return resp;
-  } catch (e) {
-    dialog.error("上传错误");
-  }
-}
-
-async function downloadBitstream() {
-  if (!boardAddress.value || !boardPort.value) {
-    dialog.error("开发板地址或端口空缺");
-    return;
-  }
-
-  try {
-    const resp = await jtagController.downloadBitstream(
-      boardAddress.value,
-      boardPort.value,
     );
     return resp;
   } catch (e) {
     dialog.error("上传错误");
     console.error(e);
+    return false;
   }
 }
 
-watch([boardAddress, boardPort], () => {
+async function downloadBitstream(): Promise<boolean> {
-  if (
+  if (isUndefined(props.jtagAddr) || isUndefined(props.jtagPort)) {
-    z.string().ip().safeParse(boardAddress).success &&
+    dialog.error("开发板地址或端口空缺");
-    z.number().positive().safeParse(boardPort).success
+    return false;
-  )
+  }
-    getIDCode();
-});
 
-async function getIDCode() {
+  try {
-  if (!boardAddress.value || !boardPort.value) {
+    const resp = await jtagController.downloadBitstream(
+      props.jtagAddr,
+      props.jtagPort,
+    );
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+    console.error(e);
+    return false;
+  }
+}
+
+async function getIDCode(isQuiet: boolean = false) {
+  if (isUndefined(props.jtagAddr) || isUndefined(props.jtagPort)) {
     dialog.error("开发板地址或端口空缺");
     return;
   }
 
   try {
     const resp = await jtagController.getDeviceIDCode(
-      boardAddress.value,
+      props.jtagAddr,
-      boardPort.value,
+      props.jtagPort,
     );
     jtagIDCode.value = resp;
   } catch (e) {
-    dialog.error("获取IDCode错误");
+    if (!isQuiet) dialog.error("获取IDCode错误");
-    console.error(e);
   }
 }
+
+watchEffect(() => {
+  eqps.setAddr(props.jtagAddr);
+  eqps.setPort(props.jtagPort);
+});
+
+watchEffect(() => {
+  if (
+    z.string().ip().safeParse(props.jtagAddr).success &&
+    z.number().positive().safeParse(props.jtagPort).success
+  )
+    getIDCode(true);
+});
 </script>
 
 <style scoped lang="postcss">

src/stores/equipments.ts

@@ -7,11 +7,16 @@ import { isNumber } from 'mathjs';
 export const useEquipments = defineStore('equipments', () => {
   const boardAddr = ref("127.0.0.1")
   const boardPort = ref(1234)
-  function setAddr(address: string) {
+  const jtagBitstream = ref<File>()
+
+  function setAddr(address: string | undefined) {
+    if (isUndefined(address)) return;
     if (z.string().ip("4").safeParse(address).success)
       boardAddr.value = address;
   }
-  function setPort(port: string | number) {
+
+  function setPort(port: string | number | undefined) {
+    if (isUndefined(port)) return;
 
     if (isString(port) && port.length != 0) {
       const portNumber = toNumber(port);
@@ -23,8 +28,6 @@ export const useEquipments = defineStore('equipments', () => {
         boardPort.value = port;
     }
   }
-  const jtagBitstream = ref<File | undefined>()
-  const remoteUpdateBitstream = ref<File | undefined>()
 
   return {
     boardAddr,
@@ -32,7 +35,6 @@ export const useEquipments = defineStore('equipments', () => {
     setAddr,
     setPort,
     jtagBitstream,
-    remoteUpdateBitstream,
   }
 })
 

src/views/TestView.vue

@@ -44,7 +44,8 @@
 import { JtagClient, type FileParameter } from "@/APIClient";
 import UploadCard from "@/components/UploadCard.vue";
 import { useDialogStore } from "@/stores/dialog";
-import { toNumber } from "lodash";
+import { Common } from "@/Common";
+import { toNumber, isUndefined } from "lodash";
 import { ref } from "vue";
 
 const jtagController = new JtagClient();
@@ -54,39 +55,30 @@ const dialog = useDialogStore();
 const boardAddress = ref("127.0.0.1"); // 默认IP地址
 const boardPort = ref("1234"); // 默认端口号
 
-async function uploadBitstream(event: Event, bitstream: File) {
+async function uploadBitstream(bitstream: File): Promise<boolean> {
-  if (boardAddress.value.length == 0) {
+  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
-    dialog.error("开发板地址空缺");
+    dialog.error("开发板地址或端口空缺");
-    return;
+    return false;
-  }
-  if (boardPort.value.length == 0) {
-    dialog.error("开发板端口空缺");
-    return;
   }
 
-  const fileParam: FileParameter = {
-    data: bitstream,
-    fileName: bitstream.name,
-  };
   try {
+    console.debug(`Before upload bistream: ${bitstream}`);
     const resp = await jtagController.uploadBitstream(
       boardAddress.value,
-      fileParam,
+      Common.toFileParameterOrNull(bitstream),
     );
-    return resp
+    return resp;
   } catch (e) {
     dialog.error("上传错误");
+    console.error(e);
+    return false;
   }
 }
 
-async function downloadBitstream() {
+async function downloadBitstream(): Promise<boolean> {
-  if (boardAddress.value.length == 0) {
+  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
-    dialog.error("开发板地址空缺");
+    dialog.error("开发板地址或端口空缺");
-    return;
+    return false;
-  }
-  if (boardPort.value.length == 0) {
-    dialog.error("开发板端口空缺");
-    return;
   }
 
   try {
@@ -98,6 +90,7 @@ async function downloadBitstream() {
   } catch (e) {
     dialog.error("上传错误");
     console.error(e);
+    return false;
   }
 }
 </script>