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

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

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

第二种

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

2、提交formdata

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

测试结果uniapp发送formdata表单请求(全网最简单方法)_第1张图片

结尾

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

你可能感兴趣的:(前端,uni-app,前端,javascript)