vue axios element-ui上传文件遇到的问题

element-ui

因为需要代理接口,就需要使用http-request进行自定义上传

   :with-credentials="true"
   :http-request="customUpload"
    customUpload(fileobj) {
      let _data = new FormData();
      _data.append('file', fileobj.file)
      protoUpload(_data)
    }

axios

上传文件中,需要设置 ['Content-Type'] === 'multipart/form-data'
需要在axios中对post数据分别进行处理:

axiosServer.interceptors.request.use(
  config => {
    // token
    if (false) {
      config.headers.common['Authorization'] = AUTH_TOKEN
    }
    // get post 默认处理
    if (config.method === 'get') {
      return config
    }
    if (config.method === 'post') {
      //multipart/form-data
      if (config.headers['Content-Type'] === 'multipart/form-data') {
        return config
      }
      // application/x-www-form-urlencoded
      config.data = qs.stringify({ ...config.data })
      return config
    }
  },
  err => {
    return Promise.reject(err)
  }
)
function postData(url, data, config) {
  return $axios.post(url, data, config)
}
export const protoUpload = (data) => postData('/manage/upload',data ,{ headers: { 'Content-Type': 'multipart/form-data' }})

你可能感兴趣的:(vue axios element-ui上传文件遇到的问题)