axios实现表单上传

1,245 阅读1分钟

最近碰到项目实现文件上传的功能,一般文件上传使用form表单即可完成,但在上传之前需要先调用有关文件是否已经存在的接口。为了代码的可读性更高,决定使用axios模仿表单来完成文件检验的接口。axios的表单格式有以下两种,application/x-www-form-urlencodedmultipart/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
      })
    },