最近碰到项目实现文件上传的功能,一般文件上传使用form表单即可完成,但在上传之前需要先调用有关文件是否已经存在的接口。为了代码的可读性更高,决定使用axios模仿表单来完成文件检验的接口。axios的表单格式有以下两种,application/x-www-form-urlencoded和multipart/form-data,第一种是表单的基本格式,通常上传文件名来判断文件是否存在,而第二种表单格式可以用于上传文件来判断文件是否存在。
mulitpart/form-data
这种表单格式主要是在传递的数据中需要上传文件的时候使用。
利用FormData创建一个表格对象,设置好参数后作为axios的data属性的参数传入就可以实现发送和表单完全一致的数据。
fileIsExist: (data) => {
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
let formData = new FormData
formData.append(/**这里填写文件参数名*/,data)
return axios({
method: 'post',
url:/**填写检验的url**/,
data: formData
})
}
application/x-www-form-urlencoded
fileIsExist: (data: any) =>{
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
return axios({
method: 'post',
url:/**填写检验的url**/,
data
})
},