使用axios请求后端的上传图片接口

news2024/9/24 5:30:40

安装axios

npm install axios

创建input文件上传标签

<input type="file" name="" id="" @change="handleChange" />

使用axios请求后端的图片上传接口

function handleChange(val) {
  // new FormData() js内置构造函数,将图片处理的formdata的数据格式
  const formData = new FormData();

  // val.target.files[0] 是一个 File 对象,通常来自 input[type="file"] 的 onChange 事件
  formData.append('image', val.target.files[0]); 

  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log(res);
  })
}

结果展示

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

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

相关文章

C++入门基础:C++中的常用操作符练习

开头介绍下C语言先&#xff0c;C是一种广泛使用的计算机程序设计语言&#xff0c;起源于20世纪80年代&#xff0c;由比雅尼斯特劳斯特鲁普在贝尔实验室开发。它是C语言的扩展&#xff0c;增加了面向对象编程的特性。C的应用场景广泛&#xff0c;包括系统软件、游戏开发、嵌入式…

【Nginx】Mac电脑安装nginx

使用brew安装nginx brew install nginx查看nginx信息 brew info nginx启动nginx brew services start nginx验证是否启动成功 浏览器输入地址&#xff1a;127.0.0.1:8080 停止服务 brew services stop nginx进入nginx文件目录 cd /opt/homebrew/etc/nginx重启服务 bre…

轻量化YOLOv7系列:结合G-GhostNet | 适配GPU,华为诺亚提出G-Ghost方案升级GhostNet

轻量化YOLOv7系列&#xff1a;结合G-GhostNet | 适配GPU&#xff0c;华为诺亚提出G-Ghost方案升级GhostNet 需要修改的代码models/GGhostRegNet.py代码 创建yaml文件测试是否创建成功 本文提供了改进 YOLOv7注意力系列包含不同的注意力机制以及多种加入方式&#xff0c;在本文…

分布式光伏并网AM5SE-IS防孤岛保护装置介绍——安科瑞 叶西平

产品简介 功能&#xff1a; AM5SE-IS防孤岛保护装置主要适用于35kV、10kV及低压380V光伏发电、燃气发电等新能源并网供电系统。当发生孤岛现象时&#xff0c;可以快速切除并网点&#xff0c;使本站与电网侧快速脱离&#xff0c;保证整个电站和相关维护人员的生命安全。 应用…

【简历】吉林某一本大学:JAVA秋招简历指导,简历通过率比较低

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份吉林某一本大学25届计算机专业同学的Java简历。因为学校是一本&#xff0c;所以求职目标以中厂为主。因为学校背景在中厂是正常…

基于Jeecgboot3.6.3的vue3版本前后端分离的流程管理平台

声明一下&#xff1a;因为这个项目license问题无法开源&#xff0c;更多技术支持与服务联系本人或加入我的知识星球提供一些技术服务。 初步完成了基于jeecgboot3.6.3的vue3版本的前后端流程管理平台&#xff0c;基于flowable6.8.1&#xff0c;同时支持bpmn流程设计器与仿钉钉流…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十一章 添加设备树节点

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

利用Django和Ansible实现自动化部署

在软件开发的快节奏世界中&#xff0c;自动化部署是提高开发效率和确保软件质量的关键。Django是一个功能强大的Python Web框架&#xff0c;它允许开发者快速构建安全、可扩展的Web应用。Ansible则是一个简单且强大的自动化工具&#xff0c;它可以用于配置系统、部署软件以及执…

通信原理思科实验四:静态路由项配置实验

实验四 静态路由项配置实验 一&#xff1a;实验内容 二&#xff1a;实验目的 三、实验原理 四、实验步骤 选择三个2811型号的路由器 R1、R2、R3 路由器默认只有两个快速以太网接口&#xff0c;为路由器R1和R3增加快速以太网接口模块NM-1FE-TX&#xff0c;安装后检查路由器的接…

一番赏小程序搭建,线上一番赏市场

一番赏作为一个经久不衰的潮流市场&#xff0c;一直流行于消费者市场中。一番赏商品拥有不同系列&#xff0c;涵盖了热门动漫、漫画、影视等主题&#xff0c;商品包含了手办等周边商品&#xff0c;具有非常大的收藏价值。相比于其他潮玩模式&#xff0c;一番赏的性价比更高&…

Mindspore框架循环神经网络RNN模型实现情感分类|(四)损失函数与优化器

Mindspore框架循环神经网络RNN模型实现情感分类 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;一&#xff09;IMDB影评数据集准备 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;二&#xff09;预训练词向量 Mindspore框架循环神经网络RNN模型实现…

DASCTF-BabyAndroid

一个apk文件 下载下运行不出来 题目有提示 这是截取的信息 第一次写,我就按照大佬的wp思路来 首先我们确定 Host: yuanshen.com 这个信息 jeb打开,搜索 成功锁定到有价值的信息 protected String doInBackground(String[] params) {String contentText params[0];try {…

day20算法

一、算法的相关概念 程序 数据结构 算法 算法是程序设计的灵魂&#xff0c;结构是程序设计的肉体 算法&#xff1a;计算机解决问题的方法或步骤 1.1 算法的特性 1> 确定性&#xff1a;算法中每一条语句都有确定的含义&#xff0c;不能模棱两可 2> 有穷性&#xf…

ModuleNotFoundError: No module named ‘scrapy.utils.reqser‘

在scrapy中使用scrapy-rabbitmq-scheduler会出现报错 ModuleNotFoundError: No module named scrapy.utils.reqser原因是新的版本的scrapy已经摒弃了该方法,但是scrapy-rabbitmq-scheduler 没有及时的更新,所以此时有两种解决方法 方法一.将scrapy回退至旧版本,找到对应的旧版…

提取集合中元素的某个属性组成String类型的集合,并且属性的值要非null,最后拼接该String类型的集合得到字符串

一、String类型的集合拼接得到字符串 方法一&#xff1a; 使用的是Java 8或更高版本&#xff0c;可以使用String.join()方法&#xff0c;这个方法可以非常方便地将一个集合中的元素拼接成一个字符串&#xff0c;并允许你指定分隔符。 import java.util.ArrayList; import j…

认识神经网络【多层感知器数学原理】

文章目录 1、什么是神经网络2、人工神经网络3、多层感知器3.1、输入层3.2、隐藏层3.2.1、隐藏层 13.2.2、隐藏层 2 3.3、输出层3.4、前向传播3.4.1、加权和⭐3.4.2、激活函数 3.5、反向传播3.5.1、计算梯度3.5.2、更新权重和偏置 4、小结 &#x1f343;作者介绍&#xff1a;双非…

微信小程序实现聊天界面,发送功能

.wxml <scroll-view scroll-y"true" style"height: {{windowHeight}}px;"><view wx:for"{{chatList}}" wx:for-index"index" wx:for-item"item" style"padding-top:{{index0?30:0}}rpx"><!-- 左…

Qt基础 | QSqlTableModel 的使用

文章目录 一、QSqlTableModel 的使用1.主窗口MainWindow类定义2.构造函数3.打开数据表3.1 添加 SQLite 数据库驱动、设置数据库名称、打开数据库3.2 数据模型设置、选择模型、自定义代理组件、界面组件与模型数据字段间的数据映射 4.添加、插入与删除记录5.保存与取消修改6.设置…

TikTok Shop全托管上线JIT,并预计10月开放西班牙和爱尔兰站点

据悉&#xff0c;TikTok Shop官方近期在其全托管平台上正式推出了JIT&#xff08;Just-In-Time&#xff09;生产模式&#xff0c;这一创新举措彻底颠覆了传统供应链流程&#xff0c;实现了“先有订单&#xff0c;再精准供货”的高效运营模式。对于广大卖家而言&#xff0c;这无…

网络安全基础知识及安全意识培训(73页可编辑PPT)

引言&#xff1a;在当今数字化时代&#xff0c;网络安全已成为企业和个人不可忽视的重要议题。随着互联网的普及和技术的飞速发展&#xff0c;网络威胁日益复杂多变&#xff0c;从简单的病毒传播到高级持续性威胁&#xff08;APT&#xff09;、勒索软件攻击、数据泄露等&#x…