uniapp发送formdata表单请求(全网最简单方法)_uniapp formdata

因为uniapp不支持直接传输formdata，只提供了uploadFile方法上传文件，但是利用该方法就可以传输formdata了。

第一种：

可以直接使用filePath属性进行空文件传输，只需要设置filePath为空就行了。

function $uploadForm(url, data, filePath=''){
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			header: {
				"Authorization": $getToken()
			},
			url: url,
			timeout: 1000*6,
			filePath,
			formData: data,
			success: (res) => {
			},
			complete: () => {
			},
			fail: (res) => {
			}
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

调用时，data是个对象即可。

this.$uploadForm(`/xxx`,{xxx:xxx}).then(res=>{})
1

第二种

使用file属性，无需选择文件，我们自己new个文件即可。

1、封装的上传方法

function $uploadFile(url, file, fileName='file', data){
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			header: {
			},
			url: url,
			timeout: 1000*6,
			file: file,
			name: fileName,
			formData: data,
			success: (res) => {
			},
			complete: () => {
			},
			fail: (res) => {
			}
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、提交formdata

this.$uploadFile(this.testForm.url
					,new window.File([new Blob()],'a.txt')
					,'file'
					, JSON.parse(this.testForm.data)).then(res=>{})
1
2
3
4

测试结果

结尾

通过以上两种方式就能使用uniapp以表单方式提交数据了，虽然多传个file，但是这并不影响接口业务。