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

上传图片并显示#Vue3#后端接口数据

上传图片并显示#Vue3#后端接口数据

效果:
在这里插入图片描述

上传并显示图片

代码:

<!-- 上传图片并显示 -->
<template><!-- 上传图片start --><div><el-form><el-form-item><el-uploadmultipleclass="avatar-uploader"action="":http-request="uploadFile1"list-type="picture":show-file-list="false"><img v-if="imageUrl" class="avatar" :src="imageUrl" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item></el-form></div><!-- 上传图片end -->
</template><script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";const router = useRouter();
console.log(router.currentRoute.value.path); //当前路由路径
sessionStorage.setItem("path", router.currentRoute.value.path);// 定义表单
let tableForm = ref({file: "",
});
const imageUrl = ref("");
// 上传并显示图片
const uploadFile1 = async (val: any) => {tableForm.value.file = val.file;console.log("tableForm", tableForm);// 数据交互let formdata = new FormData();formdata.append("File", tableForm.value.file);// 上传文件await axios.post("http://192.168.1.214:5050/api/File/UploadFile", formdata, {headers: { "Content-Type": "multipart/form-data" },}).then((res) => {console.log("res.data", res.data);console.log("res.data.data.id", res.data.data.id);// 找到文件路径axios.post("http://192.168.1.214:5050/api/File/FilePathInfo", {id: res.data.data.id,}).then((result) => {console.log("result.data.data.filePath", result.data.data.filePath);let path = "http://192.168.1.214:5050" + result.data.data.filePath;console.log("path", path);imageUrl.value = path;});if (res.data.status === 200) {ElNotification({title: "上传成功",message: "上传成功",duration: 2000,type: "success",});}});
};
</script><style scoped lang="scss">
// 上传图片
.avatar-uploader .avatar {width: 200px;height: 200px;display: block;
}
.avatar-uploader {width: 200px;height: 200px;border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}
.avatar-uploader:hover {border-color: var(--el-color-primary);
}
.el-icon {font-size: 20px;color: #8c939d;width: 200px;height: 200px;text-align: center;
}
</style>

相关文章:

上传图片并显示#Vue3#后端接口数据

上传图片并显示#Vue3#后端接口数据 效果&#xff1a; 上传并显示图片 代码&#xff1a; <!-- 上传图片并显示 --> <template><!-- 上传图片start --><div><el-form><el-form-item><el-uploadmultipleclass"avatar-uploader&quo…...

音视频开发14 FFmpeg 视频 相关格式分析 -- H264 NALU格式分析

H264简介-也叫做 AVC H.264&#xff0c;在MPEG的标准⾥是MPEG-4的⼀个组成部分–MPEG-4 Part 10&#xff0c;⼜叫Advanced Video Codec&#xff0c;因此常常称为MPEG-4 AVC或直接叫AVC。 原始数据YUV,RGB为什么要压缩-知道就行 在⾳视频传输过程中&#xff0c;视频⽂件的传输…...

Qt学习记录(15)数据库

目录 前言&#xff1a; 数据库连接 项目文件加上sql 打印查看Qt支持哪些数据库驱动 QMYSQL [static] QSqlDatabase QSqlDatabase::addDatabase(const QString &type, const QString &connectionName QLatin1String(defaultConnection)) 数据库插入 头文件.h 源…...

c++常用设计模式

1、单例模式(Singleton)&#xff1a;保证一个类只有一个实例&#xff0c;提供一个全局访问点&#xff1b; class Singleton { private:static Singleton* instance;Singleton() {}public:static Singleton* getInstance() {if (instance nullptr) {instance new Singleton()…...

【动手学深度学习】softmax回归从零开始实现的研究详情

目录 &#x1f30a;1. 研究目的 &#x1f30a;2. 研究准备 &#x1f30a;3. 研究内容 &#x1f30d;3.1 softmax回归的从零开始实现 &#x1f30d;3.2 基础练习 &#x1f30a;4. 研究体会 &#x1f30a;1. 研究目的 理解softmax回归的原理和基本实现方式&#xff1b;学习…...

MySQL:MySQL执行一条SQL查询语句的执行过程

当多个客户端同时连接到MySQL,用SQL语句去增删改查数据,针对查询场景,MySQL要保证尽可能快地返回客户端结果。 了解了这些需求场景,我们可能会对MySQL进行如下设计: 其中,连接器管理客户端的连接,负责管理连接、认证鉴权等;查询缓存则是为了加速查询,命中则直接返回结…...

解决Python导入第三方模块报错“TypeError: the first argument must be callable”

注意以下内容只对导包时遇到同样的报错会有参考价值。 问题描述 当你尝试导入第三方模块时&#xff0c;可能会遇到如下报错信息&#xff1a; TypeError: the first argument must be callable 猜测原因 经过仔细检查代码&#xff0c;我猜测这个错误的原因是由于变量名冲突所…...

在python中连接了数据库后想要在python中通过图形化界面显示数据库的查询结果,请问怎么实现比较好? /ttk库的treeview的使用

在Python中&#xff0c;你可以使用图形用户界面&#xff08;GUI&#xff09;库来显示数据库的查询结果。常见的GUI库包括Tkinter&#xff08;Python自带&#xff09;、PyQt、wxPython等。以下是一个使用Tkinter库来显示数据库查询结果的简单示例。 首先&#xff0c;你需要确保…...

OZON的选品工具,OZON选品工具推荐

在电商领域&#xff0c;选品一直是决定卖家成功与否的关键因素之一。随着OZON平台的崛起&#xff0c;越来越多的卖家开始关注并寻求有效的选品工具&#xff0c;以帮助他们在这个竞争激烈的市场中脱颖而出。本文将详细介绍OZON的选品工具&#xff0c;并推荐几款实用的辅助工具&a…...

营销方案撰写秘籍:包含内容全解析,让你的方案脱颖而出

做了十几年品牌&#xff0c;策划出身&#xff0c;混迹过几个知名广告公司&#xff0c;个人经验供楼主参考。 只要掌握以下这些营销策划案的要点&#xff0c;你就能制作出既全面又专业的策划案&#xff0c;让你的工作成果不仅得到同事的认可&#xff0c;更能赢得老板的赏识&…...

如何制作一本温馨的电子相册呢?

随着科技的不断发展&#xff0c;电子相册已经成为了一种流行的方式来记录和分享我们的生活。一张张照片&#xff0c;一段段视频&#xff0c;都能让我们回忆起那些温馨的时光。那么&#xff0c;如何制作一本温馨的电子相册呢&#xff1f; 首先&#xff0c;选择一款合适的电子相册…...

485通讯网关

在工业自动化与智能化的浪潮中&#xff0c;数据的传输与交互显得尤为重要。作为这一领域的核心设备&#xff0c;485通讯网关凭借其卓越的性能和广泛的应用场景&#xff0c;成为了连接不同设备、不同协议之间数据转换和传输的桥梁。在众多485通讯网关中&#xff0c;HiWoo Box以其…...

Anaconda中的常用科学计算工具

Anaconda中的常用科学计算工具 Anaconda是一个流行的Python科学计算环境&#xff0c;它提供了大量的科学计算工具&#xff0c;这些工具可以帮助用户进行数据分析、机器学习、深度学习等任务。以下是一些常见的Anaconda中的科学计算工具&#xff1a; NumPy&#xff1a;一个用于…...

Java 中BigDecimal传到前端后精度丢失问题

1.用postman访问接口&#xff0c;返回的小数点精度正常 2.返回到页面里的&#xff0c;小数点丢失 3.解决办法&#xff0c;在字段上加注解 JsonFormat(shape JsonFormat.Shape.STRING) 或者 JsonSerialize(using ToStringSerializer.class) import com.fasterxml.jackson.a…...

在Linux/Ubuntu/Debian上安装TensorFlow 2.14.0

在Ubuntu上安装TensorFlow 2.14.0&#xff0c;可以遵循以下步骤。请注意&#xff0c;由于TensorFlow的版本更新可能很快&#xff0c;这里提供的具体步骤可能需要根据你的系统环境和实际情况进行微调。 准备工作 检查系统要求&#xff1a;确保你的Ubuntu系统满足TensorFlow的运…...

多语言for循环遍历总结

多语言for循环遍历总结 工作中经常需要遍历对象&#xff0c;但不同编程语言之间存在一些细微差别。为了便于比较和参考&#xff0c;这里对一些常用的遍历方法进行了总结。 JAVA 数组遍历 Test void ArrayForTest() {String[] array {"刘备","关羽", &…...

python API自动化(Jsonpath断言、接口关联及加密处理)

JsonPath应用及断言 重要 自动化要解决的核心问题 &#xff1a;进行自动测试-自动校验&#xff08;进行结果的校验 主要能够通过这个方式提取数据业务场景&#xff1a;断言 、接口关联 {key:value}网址&#xff1a;附&#xff1a;在线解析 JSONPath解析器 - 一个工具箱 - 好用…...

C++入门5——C/C++动态内存管理(new与delete)

目录 1. 一图搞懂C/C的内存分布 2. 存在动态内存分配的原因 3. C语言中的动态内存管理方式 4. C内存管理方式 4.1 new/delete操作内置类型 4.2 new/delete操作自定义类型 1. 一图搞懂C/C的内存分布 说明&#xff1a; 1. 栈区&#xff08;stack&#xff09;&#xff1a;在…...

leetcode 743.网络延时时间

思路&#xff1a;迪杰斯特拉最短路径 总结起来其实就两件事&#xff1a; 1.从所给起点开始能不能到达所有点&#xff1b; 2.如果能够到达所有点&#xff0c;那么这个时候需要判断每一个点到源点的最短距离&#xff0c;然后从这些点中求出最大值。 所以用最小路径求解是最划…...

MATLAB导入导出Excel的方法|读与写Excel的命令|附例程的github下载链接

前言 前段时间遇到一个需求&#xff1a;导出变量到Excel里面&#xff0c;这里给出一些命令&#xff0c;同时给一个示例供大家参考。 MATLAB读/写Excel的命令 在MATLAB中&#xff0c;可以使用以下命令来读写Excel文件&#xff1a; 读取Excel文件&#xff1a; xlsread(filen…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

IP选择注意事项

IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时&#xff0c;需要考虑以下参数&#xff0c;然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...

多模态大语言模型arxiv论文略读(110)

CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文标题&#xff1a;CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文作者&#xff1a;Hidehisa Arai, Keita Miwa, Kento Sasaki, Yu Yamaguchi, …...