vue3+ts＋flask+websocket实现实时异物检测

阿松のblog2025-08-12 21:36

文章目录

1.学习目的

最近有个需求，界面需要有两种检测方式，一种是静态的，也就是使用普通的flask接口即可，一种是利用前后端建立websocket通信，实现数据实时传输，然后我们后端检测模型实时进行视频检测，这样一来，我们就可以方便的进行检测见面展示，以及后期的语音播报等下游任务。

2.技术栈

前端：vue3+ts
后端：flask/fastAPI中的websocket

３．框架一些前置知识以及ｂｕｇ处理

图１　ｖｕｅ３主程序入口

图２　语法校验需要添加的ｒｕｌｅｓ

如上图，ＨｅｌｌｏＷｏｒｌｄ报错，提示信息实际上是说这个组件没有默认导出，但是ｖｕｅ３新特性明确指出，ｓｅｔｕｐ语法糖是默认导出的，再仔细检查，ｖｅｔｕｒ语法检查存在ｂｕｇ，所以我们不必太过理会。

上图是一些ｔｓ配置，可以配一下。

对ｖｕｅ不太了解的话，建议去官网学习

通过这个，可以把传统的按钮嵌套ｉｃｏｎ进行封装，直接调用ｅｌｅｍｅｎｔＵＩ即可很好的实现这种带ｌｏｇ的按钮

４.具体实现

利用ｗｅｂｐａｃｋ搭建ｖｕｅ３项目
ｎｐｍ　ｉｎｓｔａｌｌ
-　利用ｎｐｍ安装ｅｌｅｍｅｎｔｕｉ库
－　ｖｕｅ３－－ｍａｉｎ．ｔｓ中引入ｅｌｅｍｅｎｔＵＩ

注意这里是全局引入，如果需要轻量化引入，可以参考ｅｌｅｍｅｎｔＵＩ官网进行处理，这里不再重复说明。

使用ｉｃｏｎ需要额外下载这个包，不然看不见那些ｉｃｏｎ

后端返回数据的时候，还是采用ｍｉｍｅＴｙｐｅ比较好，必须设置好前后端返回数据类型格式。必须设置好相应的前后端交互数据类型。
文件上传操作

typescript 复制代码

</template>
 <input type="file" @change="onFileChange" />
</template>
<!-- 编写界面逻辑js -->
 <script setup lang='ts'>
const onFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files[0]) {
    selectedFile.value = target.files[0];
  }
};
＜／ｓｃｒｉｐｔ＞

４．结果展示

５.总结

本次改进比较简单，关注我，继续学习前端知识～