Vue axios 发送 FormData 请求,web端开发

54 阅读3分钟

return stringify(data)

}

################################### 请求方式二,局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

},

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

],

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

const formData = new FormData()

for (const key in data) {

// eslint-disable-next-line no-prototype-builtins

if (data.hasOwnProperty(key)) {

if (data[key]) {

if (data[key].constructor === Array) {

if (data[key][0]) {

if (data[key][0].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

data[key].forEach((item, index) => {

formData.append(key + [${index}], item)

})

}

} else {

formData.append(key + '[]', '')

}

} else if (data[key].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

formData.append(key, data[key])

}

} else {

if (data[key] === 0) {

formData.append(key, 0)

} else {

formData.append(key, '')

}

}

}

}

return formData

}

  • 方式二,使用 qs 组件,但是 qs 格式化会过滤空数组数据:

import axios from 'axios'

// qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用

import qs from 'qs'

################################### 请求方式一,全局使用

// 创建 axios 实例

const service = axios.create({

baseURL: '',

timeout: 20000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

// 将请求数据转换成功 formdata 接收格式,这一段选方式一那种拦截转换也可以。

service.interceptors.request.use(config => {

const token = Vue.ls.get(ACCESS_TOKEN)

if (token) {

// 让每个请求携带自定义 token 请根据实际情况自行修改

config.headers['X-Token'] = token

}

// 将请求数据转换成功 formdata 接收格式

config.data = qs.stringify(config.data)

return config

}, err)

################################### 请求方式二,局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

},

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return qs.stringify(data)

}

],

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

  • 方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)

import axios from 'axios'

################################### 请求方式跟上面一样

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

},

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

],

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

let ret = ''

for (const it in data) {

ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

}

ret = ret.substring(0, ret.lastIndexOf('&'))

return ret

}

三、上面方式,参数格式化之后:

  • 方式一 格式化出来的数据:

// 数组无值

id: 2086

intention:

follower_id[]:

concat_material[]:

// 数组有值

id: 2086

intention:

follower_id[0]: 351

follower_id[1]: 66

// 数组 json 为空会被转成正常的数组,有值会被转成字符串,所以服务器需要注意处理

concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]

  • 方式二 格式化出来的数据:

// 数组无值

id: 2086

intention:

最后

中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。

  • 技术要深入到什么程度?

  • 做久了技术总要转型管理?

  • 我能做什么,我想做什么?

  • 一技之长,就是深耕你的专业技能,你的专业技术。(重点)

  • 独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)

  • 拥有事业,选择一份使命,带领团队实现它。(创业)

一技之长分五个层次

  • 栈内技术 - 是指你的前端专业领域技术

  • 栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识

  • 工程经验 - 是建设专业技术体系的“解决方案”

  • 带人做事 - 是对团队协作能力的要求

  • 业界发声 - 工作经验总结对外分享,与他人交流

永远不要放弃一技之长,它值得你长期信仰持有

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。

开源分享:docs.qq.com/doc/DSmRnRG…