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

作者:橙子时间:2026-10-31 06:37:49浏览:665

本文介绍了在uniapp中发送formdata表单请求的两种简单方法。第一种利用uploadFile方法的filePath属性进行空文件传输,第二种通过new File对象模拟文件提交。两种方法均能有效实现表单数据提交,不影响接口业务逻辑。

由于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) => {
			}
		})
	})
}

调用该方法时,data参数需传递一个对象。

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

第二种方法:

使用file属性,无需选择实际文件,我们可以手动创建一个File对象。

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

2、提交formdata

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

测试结果

第一种方法:

结尾

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

到此这篇关于uniapp发送formdata表单请求2种方法的文章就介绍到这了,更多相关uniapp发送formdata表单请求内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章