当前位置： 首页 > news >正文

项目实训-vue（十二）

news 2025/12/27 17:48:26

项目实训-vue（十二）

文章目录

  • 项目实训-vue（十二）
    • 1.概述
    • 2.处理进度可视化

1.概述

本篇博客将记录我在图片上传页面中的工作。

2.处理进度可视化

除了导航栏之外，我们还需要对上传图片以及图片处理的过程以及流程进行处理。
这段代码主要使用element组件库中的步骤条来实现的。
在这里插入图片描述
具体代码实现：

 <el-cardclass="el-card-upload"style="width: 100%;height: 1050px;margin: 0 auto;margin-bottom: 30px;/* overflow-y: auto; */"><!-- 步骤情况 --><el-steps:active="active"finish-status="success"style="margin: 20px"align-center><el-step title="上传息肉图片"></el-step><el-step title="处理中"></el-step><el-step title="获得检测结果"></el-step></el-steps><!-- 上传框 --><divv-loading="loading"v-show="!showReturnImage"element-loading-text="图片处理中"style="padding-top: 100px">

这段代码使用 Element UI 的 el-card 组件创建一个包含步骤指示器和上传框的界面。卡片内设置了一个步骤条 el-steps，显示了三个步骤：“上传息肉图片”、“处理中”、和"获得检测结果"，通过 :active 属性动态显示当前的步骤状态。卡片还包含一个上传框，使用 v-loading 指令显示加载状态，并在图片处理中时显示加载文本"图片处理中"。通过这种设计，用户能够直观地了解并参与息肉图片上传和处理的整个流程。

除此之外，还需要对此代码进行逻辑处理以及控制。

在这里插入图片描述
当上传图片按钮被点击之后，会调用upload函数，此时该部分代码会将 this.active = 1即表示为第1步的情况（初始的active = 0）。
在这里插入图片描述

在这里插入图片描述
当图片调用外部的处理函数处理完成之后，再将active的值设置为3，从而标志其进入了下一步操作。

实现效果如下：
在这里插入图片描述

相关文章：

项目实训-vue（十二）

项目实训-vue&#xff08;十二&#xff09; 文章目录 项目实训-vue&#xff08;十二&#xff09;1.概述2.处理进度可视化 1.概述 本篇博客将记录我在图片上传页面中的工作。 2.处理进度可视化 除了导航栏之外&#xff0c;我们还需要对上传图片以及图片处理的过程以及流程进行…...

编程日记 2024/6/26 2:56:36

达梦数据库的系统视图v$lock

达梦数据库的系统视图v$lock 在达梦数据库&#xff08;DM&#xff09;中&#xff0c;V$LOCK 系统视图用于查看当前数据库中的锁定状态。该视图提供了关于所有锁定详细信息&#xff0c;例如锁的内存地址、所属事务 ID&#xff0c;锁类型和锁模式等。这对于数据库管理员进行锁定…...

编程日记 2024/6/26 2:55:35

【无人机三维路径规划】基于树木生长算法TGA实现复杂城市地形下无人机避障三维航迹规划附Matlab代码

% 定义无人机起始位置和目标位置 start_point [0, 0, 0]; % 起始位置 [x, y, z] target_point [100, 100, 100]; % 目标位置 [x, y, z] % 定义城市地形和障碍物信息 city_map imread(‘city_map.png’); % 城市地形图像 obstacles [ 20, 30, 10; % 障碍物1位置 [x, y, z] …...

编程日记 2024/6/26 2:54:33

制造业工厂的管理到底有多难

一、引言 随着全球经济的不断发展&#xff0c;制造业作为实体经济的核心&#xff0c;对国家的经济增长起着至关重要的作用。然而&#xff0c;制造业工厂的管理却是一项复杂而艰巨的任务。本文将深入探讨制造业工厂管理所面临的挑战&#xff0c;并提出相应的应对策略。 二、制造…...

编程日记 2024/6/26 2:51:31

QTday5 2024-06-19

作业要求&#xff1a; 1.思维导图 2.整理代码&#xff1a;TCP服务器 作业1&#xff1a;思维导图 作业2&#xff1a;整理代码 运行代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QList>…...

编程日记 2024/6/26 2:49:29

Node官网下载各个版本

node官网下载各个版本地址 例如 14.16.0 Index of /download/release/v14.16.0/...

编程日记 2024/6/26 2:48:28

备战秋招day4

算法 242. 有效的字母异位词 class Solution {public boolean isAnagram(String s, String t) {int[] count new int[26];for(int i 0;i<s.length();i){count[s.charAt(i)-a];}for(int i 0;i<t.length();i){count[t.charAt(i)-a]--;if(count[t.charAt(i)-a]<0){r…...

编程日记 2024/6/26 2:46:26

【华为OD机试B卷】服务器广播、需要广播的服务器数量（C++/Java/Python）

题目 题目描述 服务器连接方式包括直接相连&#xff0c;间接连接。 A和B直接连接&#xff0c;B和C直接连接&#xff0c;则A和C间接连接。 直接连接和间接连接都可以发送广播。 给出一个N*N数组&#xff0c;代表N个服务器&#xff0c; matrix[i][j] 1&#xff0c; 则代表i和j直…...

编程日记 2024/6/26 2:44:24

目标检测数据集 - 手机屏幕表面表面缺陷检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;手机屏幕表面缺陷检测数据集&#xff0c;真实采集高质量手机屏幕表面含缺陷图片数据&#xff0c;数据集含多款不同型号和品牌的手机屏幕表面图片数据&#xff0c;包括苹果手机屏、三星手机屏、华为手机屏等数据。数据标注标签包括 Bubble 气泡/水滴、Scr…...

编程日记 2024/6/26 2:39:18

语音相关算法学习整理

最近看了一下百度paddlespeech的一些公开课&#xff0c;把课程里的视频内容大体听了一下&#xff0c;现在整理一下笔记。教程链接见&#xff1a;飞桨AI Studio星河社区-人工智能学习与实训社区 语音识别的过程可以这样简单概括&#xff1a; 将声音信号经过预加重、加窗、fft等…...

编程日记 2024/6/26 2:38:17

[C#] opencvsharp对Mat数据进行序列化或者反序列化以及格式化输出

【简要介绍】 在OpenCVSharp中&#xff0c;FileStorage类用于将数据&#xff08;包括OpenCV的Mat类型数据&#xff09;序列化为XML或YAML格式的文件&#xff0c;以及从这些文件中反序列化数据。以下是关于FileStorage类用法的详细说明&#xff1a; 写入数据&#xff08;序列化…...

编程日记 2024/6/26 2:36:15

Linux中的TCP与UDP：理解两者的差异

在计算机网络的世界中&#xff0c;TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;是两种至关重要的传输层协议。它们就像是我们日常生活中的通信方式&#xff0c;有着不同的使用场景和优缺点。通过一个简单的比喻&#xff0c;我们可以更…...

编程日记 2024/6/26 2:34:13

通信系统网络架构_1.局域网网络架构

当今&#xff0c;通信网络从大的方面主要包括局域网、广域网、移动通信网等网络形式。不同的网络会采用不同的技术进行网络构建。以下针对不同的网络给出各自的网络架构以及所采用的技术。 1.概述 局域网&#xff0c;即计算机局部区域网络&#xff0c;是一种为单一机构所拥有的…...

编程日记 2024/6/26 2:33:12

Pycharm 启动 Django项目 —— python篇

1、打开你的工程&#xff0c;在菜单栏里找到Run-->Edit Configurations 2、在打开的对话框里边选择Python&#xff0c;点击号 3.选择Python 4.出现了一个新的项Unnamed&#xff0c;你可以把它改名叫debug&#xff0c;好听一点 5.脚本选择你网站的manage.py&#xff0c;脚本参…...

编程日记 2024/6/26 2:32:10

6-47选择整数计算

整数计算&#xff1a; 用swing组件来实现整数计算&#xff0c;需要对整数计算的值进行校验。 import javax.swing.*; import java.awt.*; import java.awt.event.*;public class IntegerCalculator extends JFrame implements ActionListener {private JCheckBox[] checkBoxe…...

编程日记 2024/6/26 2:30:08

什么是Redis?|介绍与使用及特点浅记

Redis简介 Redis&#xff08;Remote Dictionary Server&#xff09;是一种基于内存、支持持久化的键值对存储系统&#xff0c;具有丰富的数据结构和高性能的特性。它不仅可以作为数据库&#xff0c;还可以作为缓存和消息中间件使用。Redis是单线程模型&#xff0c;但利用IO多路…...

编程日记 2024/6/26 2:29:07

LeetCode题练习与总结：只出现一次的数字Ⅱ--137

一、题目描述 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 示例 1&#xff1a; 输入&#xff1a;n…...

编程日记 2024/6/26 2:28:06

Live Wallpaper Themes 4K Pro for Mac v19.9 超高清4K动态壁纸

Live Wallpaper & Themes 4K Pro for Mac v19.7 是一款专为Mac用户设计的超高清4K动态壁纸应用程序。它凭借出色的视觉效果和丰富的个性化设置&#xff0c;为用户带来全新的桌面体验。 这款软件提供了大量精美的动态壁纸供用户选择&#xff0c;涵盖了各种风格和主题&#…...

编程日记 2024/6/26 2:25:02

vue3+ts：监听dom宽高变化函数

一、效果展示 二、代码 getSize.ts import { ref, Ref, watchEffect } from "vue";export const getWidth (domRef: Ref<HTMLElement | null>) > {const width ref<number>(0);const height ref<number>(0);const observer new ResizeObs…...

编程日记 2024/6/26 2:21:59

数据库浅识及MySQL的二进制安装

数据库基础概念与MySQL二进制安装与初始化 使用数据库的必要性 数据库可以结构化储存大量数据信息&#xff0c;方便用户进行有效的检索访问 有效的保持数据信息的一致性&#xff0c;完整性&#xff0c;降低数据冗余 可以满足应用的共享和安全方面的要求 数据库基本概念 数据…...

编程日记 2024/6/26 2:20:57

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/12/22 19:27:01

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/12/11 5:12:21

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/12/21 0:33:52

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/12/22 9:07:35

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45