axios post请求 multipart/form-data 几种正确方法

loonj

已于 2023-03-03 18:26:46 修改

阅读量2.2k

点赞数

文章标签：前端 javascript 开发语言

于 2023-02-13 16:06:26 首次发布

本文链接：https://blog.csdn.net/loonj/article/details/129010827

版权

该文章展示了两种使用axios进行POST请求，以multipart/form-data格式上传文件的方法。首先设置headers，然后创建axios实例，将FormData对象作为数据参数，配合headers发送请求。在成功响应后处理返回的fileUrl。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题axios post请求 multipart/form-data 几种正确方法

import util from '../utils/util'
import {baseURL} from "../utils/request";
import axios from "axios";
export default {
  name: "Menu",
  data(){
    return {
      headers:{}
    }
  },
  created() {
    this.load()
    let user=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):null
    if(user){
      this.headers['token'] = user.token
    }
    this.headers['Content-Type']='multipart/form-data'

  },

第一种方式

axios.post(baseURL+"/upload/upload-qny", formData,
    {headers: this.headers})
    .then(res=>{
      console.log(res.data)
      //第二步，将返回的url替换成文本原位置
      $vm.$img2Url(pos,res.data.fileUrl)
    })

第二种方式

axios(
    {
      url:baseURL+"/upload/upload-qny",
      method: "post",
      data:formData,
      headers:this.headers
    }
).then(res=>{
  console.log(res.data)
  //第二步，将返回的url替换成文本原位置
  $vm.$img2Url(pos,res.data.fileUrl)
})