外贸建站建在哪里,苏州那家公司做网站比较好,建设网站深圳,重庆公司网站 技术支持学无止境#xff0c;气有浩然 文章目录 前言展示问题代码问题解决打完收工#xff01; 前言
工作里做的一个小工具#xff0c;axios传参#xff0c;使用FormData传参到后端#xff0c;没有办法映射除字段值#xff0c;但是从控制台看#xff0c;传的字段值都是正确的气有浩然 文章目录 前言展示问题代码问题解决打完收工 前言
工作里做的一个小工具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 hreflet 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_urltimeout: 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/jsonreturn 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 0try {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.dataif (errorMsg ! undefined) {Notification.error({title: errorMsg,duration: 3000})} else {Notification.error({title: 未知错误,duration: 3000})}} else {const errorMsg error.response.data.messageif (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
}打完收工
