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

项目实训-vue（十二）

news 2025/7/8 18:04:52

项目实训-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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/7 12:11:39

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/7/8 6:26:33

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/7/7 20:58:52

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/7/8 14:06:13

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/7/7 21:33:03

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/7/6 8:20:01

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/7/8 5:36:52

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2025/7/8 0:20:10

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50