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

结果展示

相关推荐
大杯咖啡4 分钟前
localStorage与sessionStorage的区别
前端·javascript
RaidenLiu15 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost16 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost18 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost24 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪26 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
楼田莉子29 分钟前
C++学习:C++11关于类型的处理
开发语言·c++·后端·学习
该用户已不存在33 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方35 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米233337 分钟前
【Array】数组的方法
javascript