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

结果展示

相关推荐
fie88894 分钟前
基于MATLAB的声呐图像特征提取与显示
开发语言·人工智能
未来之窗软件服务31 分钟前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
_extraordinary_1 小时前
Java SpringMVC(二) --- 响应,综合性练习
java·开发语言
你的人类朋友1 小时前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web