axios请求的使用---图片篇

开始之前：提前引入axios库和在html准备input文件上传的元素。(如下图）

图片上传：<input id="img-upload" type="file" >
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

步骤一：通过FormData构造函数创建一个表单对象。（如下图）

const form=new FormData();

步骤二：获取上传文件的元素（input），通过change监听事件的回调函数一个形参x的target的files伪数组获得需要上传文件的对象。（如下图）

document.querySelector("#img-upload").addEventListener("change",(x)=>{
       let file=x.target.files[0]
    })

步骤三：通过表单对象的append函数添加键值对，第一参数是后端接口需要的键，第二个参数是步骤二获得的文件对象。

form.append("image",file);

步骤四：在change事件发起axios请求，设置post请求类型，设置请求地址，同时把data对象设置为表单对象。（注意：一定是在监听的change事件里面发起请求）。

axios({
        method:'post',
        url: "www.image",//我这个接口地址随便写，所以肯定不行
        data:form
    }).then((x)=>{
        //这里写请求成功的回调函数！
        console.log(x)
    }).catch((x)=>{
 //这里写请求失败的回调函数！
        alert(x.message)
});

步骤五：完！

后面有时间再写写后端接口笔记和axios基础的用法