如何使用axios发送参数有上传文件的POST请求

6,578 阅读1分钟

要点:

1、使用change事件,保存上传文件的参数对象,进而将该参数对象添加到下述的FormData对象中,详见代码如下:

<input type="file" class="uploadFile" @change="getFile($event)">

<!-- 这里$event表示原生的 DOM 事件 -->


getFile: function(event) { this.file = event.target.files[0]; }

//将上传文件的参数对象 保存到 组件的data属性对象(其中的file属性)中。 

2、创建FormData对象将POST要携带的参数编译成键值对,POST请求的携带参数是FormData对象,详见代码如下:

let formData = new FormData();

formData.append("name", this.name);

formData.append("file", this.file);

3、发送axios请求,流程是创建axios实例 => 传递参数并调用axios实例,详见代码如下:

//创建axios实例

const service = axios.create({ baseURL: 'http://10.16.18.110:8001/', timeout: 5000,})

//调用实例并传入参数

service({ 

    url: '/check', 

    method: 'post', 

    headers: { "Content-Type": "multipart/form-data" },

    data:formData 

})

.then(res => {        

    if res.status == 200{

    //如果成功响应,则执行以下代码    

}})

.catch(error => {

    //捕捉错误

})