学到很多东西的诀窍，就是一下子不要学很多。——洛克

---

前言

、axios是什么？

Axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端。都是AJAX技术的一种具体实现。

因为vue的火爆让axios成为现在比较流行的异步请求方式。本文章只是针对新手，大佬可以跳过。

---

一、常用写法

1.第一种

代码如下（示例（get方式））

// get传参数        后端接收   req.query 
axios.get('请求地址', { 
    //参数/
    params: {
      ID: 12345
    }

}) .then(function (response) { console.log(response); }) 
.catch(function (error) { console.log(error); });

axios.get是get请求方式 ，params是参数属性里面写字段名：this.当前组件变量。then是成功后的回调函数，catch错误后的回调函数。

2.第二种

代码如下（示例（post方式））

//post传参
axios.post('/url',{

  firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName

}).then(res=>{
console.log(res);
}).catch(err=>{

console.log(err);
});

二、向后台上传文件（图片）

代码如下（示例）：

html代码：

<input type="file"  v-on:change="update" nullmsg="新闻图片不能为空">

js代码：

param.append('files', file)向formData对象添加数据时候一定要注意：files是对应后台的参数名要不然传不过去的

update (e) {  // 上传照片


   let file = e.target.files[0]
   console.log({data:file})
  
   let param = new FormData() // 创建form对象
//注意files是对应后台的参数名哦   
param.append('files', file) // 通过append向form对象添加数据 
       //console.log(param);                                 // 添加form表单中其他数据
   console.log(param.get('files')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去

   // 添加请求头
  axios.post('/admin/FileSave',param,{
                'Content-type' : 'multipart/form-data'
            })
    .then(response => {
        console.log(response.data)
     if (response.data.code === 0) {
       console.log(response.data)
     
     }
    
    })
  }
  //图片

}

核心代码：

前端：

<form>
  <input type="file" id="fileInput">
  <button type="submit">Upload</button>
</form>

<script>
  const form = document.querySelector('form');
  const fileInput = document.querySelector('#fileInput');

  form.addEventListener('submit', event => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);

    fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
  });
</script>

---

后端代码（C#）： 

[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile file)
{
    if (file == null || file.Length == 0)
    {
        return BadRequest("No file selected.");
    }

    var fileName = Path.GetFileName(file.FileName);
    var filePath = Path.Combine("wwwroot", fileName);

    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }

    return Ok("File uploaded successfully.");
}

总结

axios是十分方便的Http库，大家写的时候注意符号这些，用起来都是很快的。