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

axios进行图片上传组件封装

文章目录

  • 前言
  • 图片上传接口(axios通信)
  • 图片上传
  • 使用upload
  • 上传头像效果展示
  • 总结


前言

node项目使用 axios 库进行简单文件上传的模块封装。


图片上传接口(axios通信)

新建upload.js文件,定义一个函数,该函数接受一个上传路径和一个表单对象,然后将表单数据以 multipart/form-data 的形式上传到指定的路径。
在这里插入图片描述

图片上传

在 Vue 中创建一个新的 .vue 文件:Upload.vue文件
在这里插入图片描述

使用upload

导入

import upload from '@/util/upload';
import Upload from '@/components/upload/Upload';
<el-form-item label="头像" prop="avatar"><Upload:avatar="userForm.avatar" @uploadChange="handleChange" />
</el-form-item>//@uploadChange事件 显示图片回调
const handleChange = file => {userForm.avatar = URL.createObjectURL(file)userForm.file = file
};

上传头像效果展示


总结

node项目使用 axios 库对上传图片组件的封装;图片上传接口、使用Vue和Element Plus的组合来创建一个上传头像的功能,利用父子组件通信

相关文章:

axios进行图片上传组件封装

文章目录 前言图片上传接口&#xff08;axios通信)图片上传使用upload上传头像效果展示总结 前言 node项目使用 axios 库进行简单文件上传的模块封装。 图片上传接口&#xff08;axios通信) 新建upload.js文件&#xff0c;定义一个函数&#xff0c;该函数接受一个上传路径和一…...

2312llvm,用匹配器构建clang工具

原文 用LibTooling和LibASTMatchers构建工具 这里展示如何基于Clang的LibTooling构建有用的源到源翻译工具.基础 步骤0:取Clang 因为Clang是LLVM项目的一部分,因此你需要先下载LLVM的源码.Clang和LLVM都在同一个git仓库中,在不同的目录下.更多见入门指南. cd ~/clang-llvm…...

12.26ARM作业

三个按键中断&#xff0c;控制对应灯亮灭 main.c #include "key_it.h"void delay(int ms){int i,j;for(i0;i<ms;i){for(j0;j<2000;j);}}int main(){all_led_init();key1_it_config();key2_it_config();key3_it_config();while(1){printf("do main...\n&…...

Objectiv-C设计模式笔记

文章目录 通用知识点对象创建原型模式定义适用场景示例 工厂方法定义适用场景示例 抽象工厂定义适用场景示例 生成器模式定义适用场景示例 单例模式定义适用场景示例 接口适配适配器定义适用场景示例 桥接定义适用场景示例 外观模式定义适用场景示例 对象去耦中介者定义适用场景…...

AI安全综述

1、引言 AI安全这个话题&#xff0c;通常会引伸出来图像识别领域的对抗样本攻击。下面这张把“熊猫”变“猴子”的攻击样例应该都不陌生&#xff0c;包括很多照片/视频过人脸的演示也很多。 对抗样本的研究领域已经具备了一定的成熟性&#xff0c;有一系列的理论来论述对抗样本…...

计算机网络概述(下)——“计算机网络”

各位CSDN的uu们你们好呀&#xff0c;今天继续计算机网络概述的学习&#xff0c;下面&#xff0c;让我们一起进入计算机网络概述的世界吧&#xff01;&#xff01;&#xff01; 计算机网络体系结构 数据传输流程 计算机网络性能指标 计算机网络体系结构 两个计算机系统必须高度…...

anaconda创建环境时安装默认的第三方库

感谢阅读 写作原因首先要有python解释器加入每次创建环境都需要的python库查看所有的默认安装库还原方法 写作原因 近期由于多个项目在多头并举&#xff0c;出现了每次安装环境都要重新打一遍指令的麻烦问题&#xff0c;出于节约时间从而提高工作效率的目的。我尝试了很多方法…...

STM32 cubeMX 光敏电阻AD转化实验

文章代码使用 HAL 库。 文章目录 前言一、光敏电阻介绍二、光敏电阻原理图解析三、ADC采样介绍1. 工作原理&#xff1a;2. ADC精度&#xff1a; 四、STM32 cubeMX配置ADC采样五、代码编写总结 前言 实验开发板&#xff1a;STM32F051K8。所需软件&#xff1a;keil5 &#xff0c;…...

AutoSAR(基础入门篇)3.2-Autosar中RTE的Ports【S/R】与【C/S】

目录 一、RTE的Ports【S/R】 1、特征 1.1、扮演SWCs和BSW的交流途径 1.2、其他特征...

安装kafka

静态文件安装&#xff08;单机&#xff09; 解压到指定目录&#xff08;解压到 /usr&#xff09; tar -zxf kafka_2.11-2.2.0.tgz -C /usr/ 到指定的解压目录下 cd /usr/kafka_2.11-2.2.0/ 配置主机名 查看是否配置了HOSTNAME vim /etc/sysconfig/network 没有就新增 HOSTNA…...

[MySQL] MySQL 高级(进阶) SQL 语句

一、高效查询方式 1.1 指定指字段进行查看 事先准备好两张表 select 字段1&#xff0c;字段2 from 表名; 1.2 对字段进行去重查看 SELECT DISTINCT "字段" FROM "表名"; 1.3 where条件查询 SELECT "字段" FROM 表名" WHERE "条件…...

创建springboot项目

SpringBoot 就相当于不需要配置文件的SpringSpringMVC。 常用的框架和第三方库都已经配置好了。 maven安装配置 管理项目依赖库的 maven的安装教程网上有很多&#xff0c;这里简单记录一下。 官网下载maven后并解压。 在其目录下添加一个目录repository 然后在conf目录下…...

“双十一、二” 业务高峰如何扛住?韵达快递选择 TDengine

小 T 导读&#xff1a; 为了有效处理每日亿级的数据量&#xff0c;早在 2021 年&#xff0c;韵达就选择用 TDengine 替代了 MySQL&#xff0c;并在三台服务器上成功部署和上线了 TDengine 2.0 集群。如今&#xff0c;随着 TDengine 3.0 版本的逐渐成熟&#xff0c;韵达决定将现…...

STM32L432+LIS3DH【加速度传感器】:端侧AI

一、搜集芯片资料 1.LIS3DHTR:加速度传感器 查找链接&#xff1a; https://www.st.com/zh/mems-and-sensors/lis3dh.html 2. NUCLEO-L432KC&#xff1a;芯片 查找连接&#xff1a; https://www.st.com/zh/evaluation-tools/nucleo-l432kc.html#cad-resources 1.原理图 引…...

VCG Mesh刚性旋转(变换矩阵)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 旋转矩阵如果从线性空间的角度来看,它类似于一个投影过程。假设坐标 P ( x 1 , y 1 , z 1 ) P(x_1,y_1,z_1)...

R语言【base】——system.file() 在软件包等中查找文件的完整文件名。

Package base version 4.3.2 Parameters system.file(..., package "base", lib.loc NULL,mustWork FALSE) 参数【...】&#xff1a;字符向量&#xff0c;指定某个软件包中的子目录和文件。默认情况下&#xff0c;没有值则返回软件包的根目录。不支持通配符。 …...

HTML制作暴雨特效

🎀效果展示 🎀代码展示 <body> <!-- partial:index.partial.html --> <canvas id="canvas-club">...

cesium实现区域贴图及加载多个gif动图

1、cesium加载多个gif动图 Cesium的Billboard支持单帧纹理贴图&#xff0c;如果能够将gif动图进行解析&#xff0c;获得时间序列对应的每帧图片&#xff0c;然后按照时间序列动态更新Billboard的纹理&#xff0c;即可实现动图纹理效果。为此也找到了相对于好一点的第三方库libg…...

blackbox黑盒监控部署(k8s内)tensuns专用

一、前言 部署在k8s中需要用到deployment、configmap、service服务 二、部署 创建存放yaml的目录 mkdir /opt/blackbox-exporter && cd /opt/blackbox-exporter 编辑blackbox配置文件&#xff0c;使用configmap挂在这 vi configmap.yaml apiVersion: v1 kind: Confi…...

“C语言“——scanf()、getchar() 、putchar()、之间的关系

scanf函数说明 scanf函数是对来自于标准输入流的输入数据作格式转换&#xff0c;并将转换结果保存至format后面的实参所指向的对象。 而const char*format 指向的字符串为格式控制字符串&#xff0c;它指定了可输入的字符串以及赋值时转换方法。 简单来说给一个打印格式(输入…...

收藏!阿里后端转大模型应用层,2年Agent/RAG经验,斩获字节30%涨幅offer|小白程序员必看学习路径

作为一名从传统后端开发起步的程序员&#xff0c;我毕业后顺利入职阿里&#xff0c;做了一年后端开发工作后&#xff0c;敏锐捕捉到大模型应用层的爆发趋势&#xff0c;果断转型深耕。经过两年的Agent、RAG相关开发实践&#xff0c;最终成功拿到字节跳动Agent开发岗位offer&…...

OpCore-Simplify:从3天手动调试到3步智能配置,黑苹果配置的自动化革命

OpCore-Simplify&#xff1a;从3天手动调试到3步智能配置&#xff0c;黑苹果配置的自动化革命 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 想象一下…...

利用快马平台快速构建arm7流水灯原型,十分钟验证硬件控制逻辑

最近在带学生入门嵌入式开发时&#xff0c;发现ARM7这类经典架构虽然功能强大&#xff0c;但初学者往往会被复杂的环境搭建劝退。为了让大家能快速上手硬件控制逻辑&#xff0c;我尝试用InsCode(快马)平台构建了一个LED流水灯原型&#xff0c;整个过程比想象中顺畅很多。 项目设…...

什么是焦糖布丁理论?用 JTBD 做软件产品设计的四步法

“焦糖布丁理论”其实是对 Jobs to Be Done&#xff08;JTBD&#xff0c;待办任务理论&#xff09; 的一种本土化、形象化的称呼&#xff0c;源自哈佛商学院教授 克莱顿克里斯坦森&#xff08;Clay Christensen&#xff09; 在其著作《与运气竞争》&#xff08;Competing Again…...

LoRA训练助手入门解析:为什么权重排序对LoRA训练效果影响显著

LoRA训练助手入门解析&#xff1a;为什么权重排序对LoRA训练效果影响显著 1. 认识LoRA训练助手 如果你正在尝试训练自己的AI绘画模型&#xff0c;可能会遇到一个常见问题&#xff1a;为什么同样的图片&#xff0c;用不同的标签训练出来的效果差距那么大&#xff1f;这就是我们…...

Linux系统CPU负载与使用率详解及性能监控

1. CPU负载与CPU使用率的本质区别在Linux系统监控和性能调优过程中&#xff0c;CPU负载和CPU使用率这两个指标经常被混淆使用。作为系统管理员&#xff0c;我曾多次遇到团队成员将这两个概念混为一谈的情况&#xff0c;这往往导致对系统性能问题的误判。让我们先从一个实际案例…...

从工作流到超级智能体,Claude Code 重构AI应用底层逻辑

从工作流到超级智能体&#xff0c;Claude Code 重构AI应用底层逻辑 当AI应用从简单的对话交互&#xff0c;逐步演进到复杂的自动化工作流&#xff0c;再到如今的自主智能体时代&#xff0c;行业始终在探寻更高效、更智能的系统架构范式。Anthropic推出的Claude Code&#xff0c…...

FlexRay帧格式拆解:从Header到Trailer,手把手教你读懂汽车总线的‘数据包’

FlexRay帧格式实战解析&#xff1a;像拆解网络包一样掌握汽车总线通信 在汽车电子系统开发中&#xff0c;理解总线协议就像网络工程师需要精通TCP/IP一样重要。FlexRay作为高性能车载网络的核心协议&#xff0c;其帧格式设计既体现了汽车电子对确定性的严苛要求&#xff0c;又融…...

YOLOv8鹰眼目标检测问题解决:常见部署错误与使用技巧汇总

YOLOv8鹰眼目标检测问题解决&#xff1a;常见部署错误与使用技巧汇总 1. 引言&#xff1a;为什么选择YOLOv8鹰眼目标检测 YOLOv8作为当前计算机视觉领域最先进的目标检测模型之一&#xff0c;以其卓越的实时性和准确性赢得了广泛认可。鹰眼目标检测镜像基于Ultralytics官方YO…...

Windows右键菜单重构指南:从混乱到高效的ContextMenuManager实战

Windows右键菜单重构指南&#xff1a;从混乱到高效的ContextMenuManager实战 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 问题诊断&#xff1a;你的右键菜单是…...