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

神似彭于晏的男人

于 2024-07-24 16:31:31 发布

阅读量366

点赞数 2

分类专栏：前端开发功能库文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_56023096/article/details/140666464

版权

前端开发功能库专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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