vue項(xiàng)目中 axios 的 post 請(qǐng)求使用 formdata 傳參

cppprimer 發(fā)布于2019-08-26 13:51 / 1824人閱讀

摘要：最近做的項(xiàng)目，后端用的接收參數(shù)。由于以前一直用的傳參，這塊還真沒怎么研究過。于是萬變不離其宗，看文檔咯。

最近做的項(xiàng)目，后端用的 formData 接收參數(shù)。
由于以前一直用的 payload 傳參，這塊還真沒怎么研究過。于是萬變不離其宗，看文檔咯。
方法很直接，人狠話不多：
進(jìn)入 https://github.com/axios/axios 直接搜索 formData

看到如下：

所以說，直接修改全局配置，增加 transformRequest 配置處理就可以咯：

import axios from "axios"
import Qs from "qs"

let http = axios.create({
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data
    return Qs.stringify(data);
  }],
})

好了，是不是so easy！只能再次說明：文檔很重要！

本質(zhì)上說，formData 和 payload 的區(qū)別就是：前者是字符串，后者是一個(gè) json 對(duì)象，所以在請(qǐng)求之前把參數(shù)用 Qs 模塊轉(zhuǎn)變成字符串就可以咯

GPU云服務(wù)器云服務(wù)器 vue 中使用 webrtc vue中使用webrtc ajax的post請(qǐng)求 js中使用ajax請(qǐng)求數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109667.html

相關(guān)文章

iMap | 一款基于 Electron 和 Vue 的跨平臺(tái)旅行地圖生成器

摘要：請(qǐng)求錯(cuò)誤請(qǐng)求代碼封裝與基本一致，只是將換成即可。關(guān)于的使用是個(gè)能把組件的共享狀態(tài)抽取出來，當(dāng)做一個(gè)全局單例模式進(jìn)行管理。首先確保你的已經(jīng)安裝，運(yùn)行來安裝。項(xiàng)目地址：https://huangxizhou.com/project/iMap 技術(shù)棧 Vue.js Vuex Axios Webpack Leancloud（express） Echarts Electron（electr...

dingda 2019-08-21 17:03 評(píng)論0 收藏0
axios的使用

摘要：但是如果你想以的方式傳參，則需要做一點(diǎn)改變參考這里注意如果你的請(qǐng)求方法是，又規(guī)定了參數(shù)格式是，則必須要使用下面這些方法中的一種。 axios是vue官方推薦的http庫，詳情見官方中文文檔。安裝： npm install axios 安裝依賴： npm install --save axios vue-axios 配置模板： //main.js中 import Vue from vu...

lieeps 2019-08-22 16:23 評(píng)論0 收藏0
vue中axios請(qǐng)求的封裝

摘要：整合，最終得到的對(duì)象如下注意模塊名和沒有了，所以需要注意命名的唯一，以免覆蓋。如下，，由于我司后臺(tái)提供的接口大都是和，所以只考慮了這兩種請(qǐng)求方式在中創(chuàng)建一個(gè)，并在中引用發(fā)送請(qǐng)求 1.發(fā)送請(qǐng)求模塊目錄 showImg(https://segmentfault.com/img/bVbqjgU?w=203&h=180); 2.@/api/url中存放的是每個(gè)模塊的URL // 商品模塊 pr...

hover_lew 2019-08-23 16:18 評(píng)論0 收藏0
Vue開發(fā)總結(jié) 及一些最佳實(shí)踐（已更新）

摘要：基本開發(fā)環(huán)境創(chuàng)建的項(xiàng)目，作為代碼編寫工具插件推薦插件配置文章目錄項(xiàng)目目錄結(jié)構(gòu)介紹框架選擇處理請(qǐng)求二次封裝項(xiàng)目目錄結(jié)構(gòu)簡(jiǎn)介業(yè)務(wù)相關(guān)靜態(tài)文件全局組件基礎(chǔ)樣式布局樣式及工具引入請(qǐng)求配置路由全局狀態(tài)管理工具文件入口文件主要配置文件頁面檢查配置測(cè)試基本開發(fā)環(huán)境 vue-cli3 創(chuàng)建的項(xiàng)目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項(xiàng)目目錄結(jié)構(gòu)介紹...

NotFound 2019-08-26 13:47 評(píng)論0 收藏0
七牛云上傳及上傳方法封裝

摘要：分片及七牛云上傳封裝項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳在此做下簡(jiǎn)單的記錄，分享下面是分片上傳封裝是我寫在里面分片的大小如分片項(xiàng)目是框架，請(qǐng)求是。分片及七牛云上傳封裝項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳在此做下簡(jiǎn)單的記錄，分享下面是分片上傳封裝 process.env.MAX_FILESIZE 是我寫在config里面分片的大小如1024102410 10MB分片項(xiàng)目是vue...

Muninn 2019-08-26 13:33 評(píng)論0 收藏0