上传图片并显示#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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

16.FreeRTOS直接任务通知 Notification

FreeRTOS 直接任务通知 Notification 介绍 在嵌入式系统开发中&#xff0c;任务间的通信和同步是非常重要的一部分。而FreeRTOS就提供了多种机制来实现这些&#xff0c;比如队列、信号量和事件组。不过&#xff0c;使用这些机制都需要创建一个通信对象&#xff0c;不能直接把事…

This may be due to a blocked port, missing dependencies

安装XAMPPXAMPP之后启动mysql出现如下问题&#xff0c;只需双击XAMPP安装目录下的setup_xampp&#xff0c;等待运行完毕。 重启&#xff0c;双击xampp-control. 重新进入xampp控制界面&#xff0c;点击start。

Python私教张大鹏万字长文讲解Tailwindcss Flex 和 Grid 布局相关的样式,附完整源码和效果截图

flex-basics 样式类 Utilities for controlling the initial size of flex items. 用于控制伸缩项的初始大小的实用程序。 基础样式 ClassPropertiesbasis-0flex-basis: 0px;basis-1flex-basis: 0.25rem; /* 4px */basis-2flex-basis: 0.5rem; /* 8px */basis-3flex-basis:…

JDBC 学习笔记(一)基础篇 - JDBC 搭建的六大步骤

JDK 版本使用&#xff1a;JDK 21 框架思想&#xff1a;实体类及ORM思想 反射技术&#xff1a;BaseDAO 封装的过程 解决现有问题的角度&#xff0c;主要是 JDBC的基础应用 一、、JDBC 可以解决的问题 1.1 数据存储的问题 解决数据长期的存储问题&#xff1a; 数据通过 I/O 流…

城市之旅:使用 LLM 和 Elasticsearch 简化地理空间搜索(一)

作者&#xff1a;来自 Elastic Philipp Kahr, Valentin Crettaz 这篇博文的本地部署实践 Jupyter notebook 请详细阅读文章 “城市之旅&#xff1a;使用 LLM 和 Elasticsearch 简化地理空间搜索&#xff08;二&#xff09;”。 探索如何从自然语言提问创建地理空间搜索。在下…

最新鸿蒙南北开发学习路线+学习资料分享

前言 5月29日&#xff0c;“千帆竞发启航 共筑鸿蒙生态”鸿蒙原生应用合作仪式在北京成功举办&#xff0c;近40个应用现场官宣启动鸿蒙原生应用开发。此次官宣启动开发的鸿蒙原生应用不仅包括教育、母婴、出行、医疗健康等多领域的知名应用&#xff0c;还有十多家企业内部办公应…

OverlayFS在嵌入式系统中的应用

文章目录 抛出问题基本概念使用场景OverlayFS的详细介绍框架目录合并修改文件删除文件添加文件小结 OverlayFS在嵌入式系统中的应用内核配置OverlayFS简单应用OverlayFS应用新思路 总结 环境介绍 硬件&#xff1a;T113平台 软件&#xff1a;Tina5.0 SDK&#xff08;使用的build…

【第3章】SpringBoot实战篇之登录接口(含JWT和拦截器)

文章目录 前言一、JWT1. 什么是JWT2. 使用场景3. 结构3.1 Header3.2 Payload3.3 Signature 4. 使用 二、案例1.引入库2.JwtUtils3. UserController14. ArticleController 三、拦截器1. 定义拦截器2. 注册拦截器 四、测试1. 登录2. 无token3. 有token4. 全局配置 总结 前言 前面…

485通讯网关

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

postman教程-10-使用cookie

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了Postman Authorization授权的几种方法&#xff0c;本小节我们讲解一下Postman 使用cookie的方法。 Postman 的 cookie 管理器使您能够查看和编辑与不同域关联的 cookie。您可以为域手动创建 c…

软件测试、测试模型、测试用例

软件开发的五个模型 瀑布模型&#xff08;Waterfall Model&#xff09; 瀑布模型是所有其他模型的基础框架&#xff0c;瀑布模型的每个阶段都只执行一次&#xff0c;因此是线性顺序进行的开发模式优点&#xff1a;强调开发的阶段性&#xff1b; 强调早期计划及需求调查&#…

【Python实战】使用postman测试flask api接口

cookie_demo.py # -*- coding: utf-8 -*- """ Time : 2024/5/28 17:14 Author : 娜年花开 File : cookie_demo.py Desc : 需求&#xff1a;用户需要先登陆&#xff0c;登陆之后&#xff0c;通过Cookie来判断是不是能够访问登录后的接口userinfo &quo…

TMS FNC WX Pack TMS软件分发的一组应用程序

TMS FNC WX Pack TMS软件分发的一组应用程序 TMS FNC WX Pack是由TMS软件分发的一组应用程序。这些活动是100%的跨平台和跨Frimorc&#xff0c;并在不同的应用程序中得到支持&#xff0c;如Web应用程序、Windows、Linux等。阿拉伯语视觉组件库。安装这些计算机的过程非常简单高…

第四讲 单片机STC89C52+RA8889代码移植范例(包含API接口)

本次介绍单片机STC89C52RA8889代码移植范例&#xff0c;该范例已将RA8889的API移植好了&#xff0c;下方提供下载地址。 硬件平台&#xff1a;89C52RA8889 采用SPI通信方式 (已测试通过&#xff09; 上一讲已经阐述RA8889移植到51单片机的基本方法&#xff0c;本讲增加了API…

【第一节】数据结构和算法绪论

目录 一、数据结构的起源与发展 二、什么是数据结构 三、数据的逻辑结构和存储结构 四、数据类型和数据结构 五、算法 六、算法与数据结构的关系 七、算法时间复杂度和空间复杂度 一、数据结构的起源与发展 数据结构的起源可以追溯至1968年。当时&#xff0c;美国的唐欧…

Spring Security 注册过滤器注意事项

前两天和小伙伴聊了 Spring SecurityJWT 实现无状态登录&#xff0c;然后有小伙伴反馈了一个问题&#xff0c;感觉这是一个我们平时写代码容易忽略的问题&#xff0c;写一篇文章和小伙伴们聊一聊。 一 问题复原 先来说问题吧&#xff0c;在 Spring SecurityJWT 登录中&#x…

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;在…

【C语言】位段(结构体实现位段)

目录 一、位段的定义 二、位段的声明 三、位段的内存分配 四、位段在内存中的存储方式 五、位段的优点 六、位段的跨平台问题 七、位段的应用 八、位段使用的注意事项 一、位段的定义 信息的存取一般以字节为单位。实际上&#xff0c;有时存储一个信息不必用一个或多个字…

匠心独运,B 端系统 UI 演绎华章之美

匠心独运&#xff0c;B 端系统 UI 演绎华章之美

上位机图像处理和嵌入式模块部署(f103 mcu获取唯一id)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于stm32f103系列mcu来说&#xff0c;一般每一颗原厂的mcu&#xff0c;都会对应一个唯一的id。那这个id可以用来做什么用呢&#xff1f;个人认为&…