使用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);
  })
}

结果展示

相关推荐
云舟吖5 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户9481817675448 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明11 分钟前
vue双向数据绑定失效
前端
bug_kada14 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG15 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada16 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾16 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州19 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪19 分钟前
CSS 动画属性精讲:从基础到实战
前端·css
Ticnix25 分钟前
vue的draggable拖拽属性+Echarts实现可视化自定义数据看板
前端