React中使用Axios发起POST请求提交文件方式.docx

第

React中使用Axios发起POST请求提交文件方式

目录使用Axios发起POST请求提交文件React中fetch和axios的简单使用fetch的使用Axios的使用总结

使用Axios发起POST请求提交文件

通过Axios发起POST请求向后端提交文件

FormData传入文件类型参数

constformData=newFormData()

formData.append(key,value)

下面是Axios的post操作

Axios({

???headers:{

??????Content-Type:application/json

???},

???method:post,

???url:`后端url`,

???data:formData,

???onUploadProgress:({total,loaded})={

??????files.onProgress({percent:Math.round((loaded/total)*100).toFixed(2)},files)

???}

}).then(res={

???if(resres.status===200){

??????//响应成功的回调

??????message.success(fileName+上传成功)

???}else{

??????//响应失败

???}

})

或者直接简单点，只需要URL与参数即可

Axios.post(`URL`,formData).then(res={

???if(resres.status===200){

??????//成功时的回调

???}else{

??????//失败时的回调

???}

})

延伸：以下是axios的所有配置参数

axios({

??//`url`是用于请求的服务器URL

??url:/user,

??//`method`是创建请求时使用的方法

??method:get,//默认是get

??//`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。

??//它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URL

??baseURL:/api/,

?//`transformRequest`允许在向服务器发送前，修改请求数据

?//只能用在PUT,POST和PATCH这几个请求方法

?//后面数组中的函数必须返回一个字符串，或ArrayBuffer，或Stream

?transformRequest:[function(data){

????//对data进行任意转换处理

????returndata;

??}],

?//`transformResponse`在传递给then/catch前，允许修改响应数据

?transformResponse:[function(data){

???//对data进行任意转换处理

????returndata;

??}],

?//`headers`是即将被发送的自定义请求头

?headers:{X-Requested-With:XMLHttpRequest},

?//`params`是即将与请求一起发送的URL参数

?//必须是一个无格式对象(plainobject)或URLSearchParams对象

??params:{

???ID:12345

??},

?//`paramsSerializer`是一个负责`params`序列化的函数

?//(e.g./package/qs,/jquery.param/)

?paramsSerializer:function(params){

????returnQs.stringify(params,{arrayFormat:brackets})

?//`data`是作为请求主体被发送的数据

?//只适用于这些请求方法PUT,POST,和PATCH

?//在没有设置`transformRequest`时，必须是以下类型之一：

?//-string,plainobject,ArrayBuffer,ArrayBufferView,URLSearchParams

?//-浏览器专属：FormData,Fil