Js中如何同時使用Query string Parameters 和 form data 的傳參方法

今天在項目中遇到需要前端同時使用query string 和 form data 的post接口，首先我們要知道

Formdata的傳參

首先在頁面使用原生方法進行文件的上傳

html部分

<input type="file" name="" id="file">

js部分

function upload () {
    //當沒有文件上傳時此dom元素為null,所以要進行三目的判斷防止報錯
    let filesObj = document.getElementById('file')?.files[0] //獲取input中文件數據
    let form = new formdata() //初始化創建一個formdata對象
    form.append('file',filesObj) //使用formdata的append的方法將文件數據添加到該對象中
    //formdata中的屬性只能使用get的方法進行獲取
    console.log(form.get('file'))
    if (fileObj === undefined) {
        return null; //此處傳遞在無文件時的傳參
    } else {
        return form; //當文件上傳時返回改數據即可
    }
}

接口請求axios

// post方法 在request.js中
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params) //axios的params中就可以進行formdata的傳遞
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err)
      })
  });
}

Query string Parameters 傳參

​ Query string Parameters 在通常使用時需要用到get的傳參方式，但有時后端因為需要傳遞其他參數，下面貼上額post 的常用方法，我們項目是在全局引入request.js的方法

import { post } from './request.js'
//此處參數gg需要使用qs.stringify 或 循環進行序列化,data中則傳遞后端所需的文件流，即formdata
//序列化后的gg就可直接在地址后面拼接，且傳遞時不會出現在瀏覽器的url之后
const exGrant = (gg , data) => post{ `/api/exchange/set/card${gg}`， data}

Query string Parameters和Formdata 同時進行傳參

使用時我們需要結合前面的兩種傳參方法

import qs from 'qs'
methods: {
	upload () { ... }  //此處為文件
	exGrant () {
		let gg = `?${qs.stringify(this.form)}`
		let params = this.upload()
		exGrant(gg,params).then(res =>{
			if (res.data.code == 0) {
				...
			} else {
				...
			}
		})
	}
}

結合上述即可完成傳參