SpringBoo和vue项目blob传参未生效

学无止境，气有浩然

前言

工作里做的一个小工具，axios传参，使用FormData传参到后端，没有办法映射除字段值，但是从控制台看，传的字段值都是正确的，当然开始是因为简单没有将axios抽调公共组件，由于抽调出来之后开始报这个错误，那么很明显就是这个问题导致了。

展示问题代码

• 请求部分

handleFileUpload(file) {
      const formData = new FormData()
      if (file) {
        formData.append('file', file.file)
      }
      formData.append('name', this.form.name)
      formData.append('num', this.form.num)
      formData.append('env', this.form.env)
      formData.append('nameGenMethod', this.form.nameGenMethod)
      request.post('/home/test', formData, {
        responseType: 'blob',
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.filedownload(response)
        this.$message({
          message: 'handle success',
          type: 'success'
        })
      }).catch(error => {
        const decoder = new TextDecoder('utf-8');
        this.$message({
          message: decoder.decode(error.response.data),
          type: 'error'
        })
      })
    },
    filedownload (res) {
      const filename = res.headers['content-disposition']
      // const blob = new Blob([ iconv.decode(res.data, 'GBK')])
      const blob = new Blob([ res.data])
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      let finalfilename = filename.split('filename=')[1]
      if (finalfilename.startsWith('"')) {
        finalfilename = finalfilename.substring(1)
      }
      if (finalfilename.endsWith('"')) {
        finalfilename = finalfilename.substring(0, finalfilename.length - 1)
      }
      downloadElement.download = decodeURIComponent(finalfilename)
      document.body.appendChild(downloadElement)
      downloadElement.click()
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
    }
  }

• 公共部分

import axios from 'axios'
import { Notification } from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
  timeout: 3000000 // 请求超时时间
})

function getToken () {
    let accessToken = sessionStorage.getItem("access_token")
    if (accessToken) {
        return 'Bearer ' + accessToken
    }
    return false
}
// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers.Authorization = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    config.headers['Content-Type'] = 'application/json'
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    if (response.data instanceof Blob) {
      return response
    }
    return response.data
  },
  error => {
    if (error.toString().indexOf('Error: timeout') !== -1) {
      Notification.error({
        title: '网络请求超时',
        duration: 300000
      })
      return Promise.reject(error)
    }
    // 兼容blob下载出错json提示
    if (error.response.data instanceof Blob) {
      error.response.data.text().then(res => {
        Notification.error({
          title: res,
          duration: 3000
        })
      })
    } else {
      let code = 0
      try {
        code = error.response.status
      } catch (e) {
        if (error.toString().indexOf('Error: timeout') !== -1) {
          Notification.error({
            title: '网络请求超时',
            duration: 3000
          })
          return Promise.reject(error)
        }
      }
      if (code) {
        if (code === 401) {
          Notification.warning({
            title: '未认证',
            duration: 3000
          })
          sessionStorage.removeItem("access_token")
        } else if (code === 403) {
          Notification.warning({
            title: '未认证',
            duration: 3000
          })
          sessionStorage.removeItem("access_token")
        } else if (code === 500) {
          const errorMsg = error.response.data
          if (errorMsg !== undefined) {
            Notification.error({
              title: errorMsg,
              duration: 3000
            })
          } else {
            Notification.error({
              title: '未知错误',
              duration: 3000
            })
          }
        } else {
          const errorMsg = error.response.data.message
          if (errorMsg !== undefined) {
            Notification.error({
              title: errorMsg,
              duration: 5000
            })
          } else {
            Notification.error({
              title: '未知错误',
              duration: 3000
            })
          }
        }
      } else {
        Notification.error({
          title: '远程服务器断开连接',
          duration: 3000
        })
      }
    }
    return Promise.reject(error)
  }
)
export default service

因为项目可能会传文件，虽然不是必选项，但是可以通用，所以axios传输的时候可以使用multipart/form-data的请求头。

问题

在抽取公共请求代码的时候，重新设置了请求头为application/json,就导致使用js提供的FormData无法解析成为json，导致接收不到请求。

解决

就是判断一下请求里面是否设置了请求头就好了。

if (!config.headers['Content-Type']) {
  config.headers['Content-Type'] = 'application/json'
}

打完收工！