当前位置: 首页 > 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;它指定了可输入的字符串以及赋值时转换方法。 简单来说给一个打印格式(输入…...

Phi-3-mini-4k-instruct-gguf多场景落地:客服话术优化、会议纪要提炼、周报生成实战

Phi-3-mini-4k-instruct-gguf多场景落地&#xff1a;客服话术优化、会议纪要提炼、周报生成实战 1. 轻量级文本生成利器介绍 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型&#xff0c;特别适合处理日常办公场景中的文本任务。这个模型体积小巧但能力出众&…...

YOLO12开源模型合规部署:离线环境+审计日志+模型版本固化方案

YOLO12开源模型合规部署&#xff1a;离线环境审计日志模型版本固化方案 1. 项目背景与核心价值 YOLO12作为Ultralytics在2025年推出的最新实时目标检测模型&#xff0c;在保持高速推理性能的同时显著提升了检测精度。其引入的注意力机制优化了特征提取网络&#xff0c;nano版…...

别再写低效循环了:深入理解Qt隐式共享与C++17的std::as_const

别再写低效循环了&#xff1a;深入理解Qt隐式共享与C17的std::as_const 在代码审查中&#xff0c;你是否经常看到这样的写法&#xff1f; const QStringList& list oldList; for (auto& str : list) {// 处理字符串 }这种看似"规范"的写法&#xff0c;实际上…...

VxLAN网络如何“破圈”?聊聊Type5路由在云网融合中的真实应用场景

VxLAN Type5路由&#xff1a;云网融合时代的智能连接引擎 在数字化转型浪潮中&#xff0c;企业网络架构正经历着从传统三层架构向云原生网络的跃迁。VxLAN作为新一代网络虚拟化技术的代表&#xff0c;其Type5路由功能正在成为打通云网边界的关键推手。想象一下这样的场景&#…...

TEdit终极指南:如何用免费地图编辑器10倍提升泰拉瑞亚创作效率

TEdit终极指南&#xff1a;如何用免费地图编辑器10倍提升泰拉瑞亚创作效率 【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also let…...

AI辅助开发:模仿PS创意效果,用快马生成智能艺术风格迁移应用代码

最近在做一个艺术风格迁移的小项目&#xff0c;正好用到了InsCode(快马)平台的AI辅助开发功能&#xff0c;整个过程特别顺畅。这个项目的灵感来源于PS的创意效果&#xff0c;但想用更智能的方式来实现类似功能。下面分享一下我的实现思路和经验。 项目构思 最初是想做一个能让普…...

3分钟搭建免费B站视频解析服务:零基础教程

3分钟搭建免费B站视频解析服务&#xff1a;零基础教程 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse 你是否曾经想要保存B站的精彩视频却不知道如何操作&#xff1f;或者需要在自己的网站上嵌入B站视…...

Umi-OCR:重新定义本地化文字识别的工作流范式

Umi-OCR&#xff1a;重新定义本地化文字识别的工作流范式 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库。 …...

Windows更新修复新范式:Reset-Windows-Update-Tool的系统化解决方案

Windows更新修复新范式&#xff1a;Reset-Windows-Update-Tool的系统化解决方案 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool …...

图图的嗨丝造相-Z-Image-Turbo效果对比:8bit vs 16bit精度推理对渔网袜边缘锐度的影响

图图的嗨丝造相-Z-Image-Turbo效果对比&#xff1a;8bit vs 16bit精度推理对渔网袜边缘锐度的影响 1. 引言&#xff1a;当AI绘画遇上“渔网袜”细节 最近在玩一个挺有意思的AI绘画模型——图图的嗨丝造相-Z-Image-Turbo。这个模型专门针对“大网渔网袜”这种特定服饰的生成做…...