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

安装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);
  })
}

结果展示

相关推荐
2345VOR3 分钟前
【C#地图显示教程:实现鼠标绘制图形操作】
开发语言·c#·计算机外设·地图显示鼠标交互
Kagol5 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
开开心心_Every9 分钟前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
星释9 分钟前
优雅的Java:01.数据更新如何更优雅
java·开发语言·spring boot
The_era_achievs_hero10 分钟前
微信131~140
开发语言·javascript·微信
LeonYangRyeon11 分钟前
解锁SQL“密码”:SELECT DISTINCT END AS的深度剖析与实战指南
java·开发语言
然我15 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
☆璇1 小时前
【数据结构】排序
c语言·开发语言·数据结构·算法·排序算法
我要成为c嘎嘎大王1 小时前
【C++】初识C++(1)
开发语言·c++
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript