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 {
				...
			}
		})
	}
}

结合上述即可完成传参