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

结果展示

相关推荐
边疆.9 分钟前
【C++】继承详解
开发语言·c++·继承
给月亮点灯|16 分钟前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺33 分钟前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手36 分钟前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰1 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh01131 小时前
LRU 缓存
开发语言·前端·javascript
空山新雨(大队长)1 小时前
Java第五课:输入输出
java·开发语言
yangzhi_emo1 小时前
ES6笔记5
前端·笔记·es6
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架