uni-app -- - - - 小程序如何向后端发送Form Data格式的数据

小程序如何向后端发送Form Data格式的数据

接口请求方式 & 传参方式,肯定不是一成不变的,当遇到如题需求的时候,要知道,小程序是没有FormData对象的,那么该怎么操作呢???

1. 代码

直接上代码:

wx.request({
	url: 'https://****.**.com',
	method: 'POST',
	header: {
		'content-type': 'multipart/form-data; boundary=XXX'
	},
	data: '\r\n--XXX' +
		'\r\nContent-Disposition: form-data; name="key1"' +
		'\r\n' +
		'\r\nvalue1' +
		'\r\n--XXX' +
		'\r\nContent-Disposition: form-data; name="key2"' +
		'\r\n' +
		'\r\nvalue2' +
		'\r\n--XXX--',

	success: (res) => {
		console.log('接口返回值 => ', res)
	}
})

效果如图:
在这里插入图片描述

2. 优化

如上所示,这样写起来功能实现了,但是看起来这代码太不美观了

2.1 全局混入方法:

/**
 * 格式化formData数据
 */
formdata(obj = {}) {
	let result = ''
	for (let name of Object.keys(obj)) {
		let value = obj[name];
		result +=
			'\r\n--XXX' +
			'\r\nContent-Disposition: form-data; name=\"' + name + '\"' +
			'\r\n' +
			'\r\n' + value
	}
	return result + '\r\n--XXX--'
}

2.2 具体页面使用

// 需要的数据
let obj = {
	'key1': 'value1',
	'key2': 'value2'
}
wx.request({
	url: 'https://www.jiuwa.net/tools/api.php?type=cbwm',
	method: 'POST',
	header: {
		'content-type': 'multipart/form-data; boundary=XXX'
	},
	data: this.formdata(obj), // 使用mixin混入的方法
	success: (res) => {
		console.log('结果', res)
	}
})

效果如图:
在这里插入图片描述



参考文章:
使用wx.request发送multipart/form-data请求的方法

<think>我们面对的问题:如何在uni-app中清空表单数据? 根据引用,我们可以总结几种方法: 1. 使用v-model绑定表单数据,在提交后手动将数据置空(如引用[2]所示)。 2. 使用form组件的reset方法(如引用[3]所示),通过隐藏的reset按钮来触发重置。 3. 对于动态表单,同样可以通过重置数据模型来实现(如引用[4]中的form对象)。 具体方法如下: 方法一:手动重置数据(适用于使用v-model绑定的表单) - 在表单的每个输入项上使用v-model绑定到数据对象(例如:input1)。 - 在提交表单后(例如在formSubmit方法中),将每个绑定的数据属性重置为初始值(如空字符串、空数组等)。 示例代码(基于引用[2]): ```html <template> <view class="content"> <form @submit="formSubmit"> <input class="uni-input" name="input1" v-model="input1" placeholder="这是一个输入框" /> <button form-type="submit">Submit</button> </form> </view> </template> <script setup> import { ref } from 'vue' const input1 = ref('') const formSubmit = (e) => { console.log('submit', e.detail.value) // 模拟异步请求 setTimeout(() => { // 重置数据 input1.value = '' }, 1000) } </script> ``` 方法二:使用form的reset功能(通过隐藏的reset按钮) -form组件内添加一个隐藏的button,设置form-type为reset,并给这个button一个ref。 - 在需要重置的时候,通过ref获取这个button并触发点击事件。 示例代码(基于引用[3]): ```html <template> <view> <form @submit="formSubmit" @reset="formReset"> <input class="uni-input" name="input1" v-model="input1" placeholder="这是一个输入框" /> <button form-type="submit">Submit</button> <button form-type="reset" ref="resetBtn" style="display:none;">Reset</button> </form> </view> </template> <script setup> import { ref } from 'vue' const input1 = ref('') const resetBtn = ref(null) const formSubmit = (e) => { console.log('submit', e.detail.value) // 模拟异步请求 setTimeout(() => { // 触发重置按钮的点击事件 resetBtn.value.$el.click() }, 1000) } const formReset = () => { console.log('表单已重置') } </script> ``` 注意:在uni-app中,直接操作DOM可能不太方便,因此使用ref获取按钮实例,然后调用其点击事件。但是,在uni-app中,按钮是原生组件,使用ref获取到的是组件实例,我们可以调用组件的点击事件吗?实际上,我们可以通过触发按钮的点击事件来模拟用户点击。但是,在微信小程序等平台中,可能需要使用小程序的API(如wx.createSelectorQuery)来操作节点,但这样比较麻烦。因此,更推荐方法一,直接重置数据。 方法三:对于复杂表单(特别是动态表单),重置整个表单数据对象 - 如果表单数据结构复杂(如引用[4]中的动态表单),我们可以将整个表单数据对象进行重置。 - 在提交成功后,将表单数据对象重新初始化为默认值。 示例代码(基于引用[4]): ```javascript data() { // 定义表单的初始数据 const initialForm = { projectcontactArr: [{ role: null, roleName: null, name: null, phone: null, gender: null, genderName: null }] } return { form: JSON.parse(JSON.stringify(initialForm)), // 深拷贝初始数据 initialForm: initialForm, // 保存初始数据 // ...其他数据 } }, methods: { formSubmit() { // 提交表单... // 在提交成功后重置表单 this.resetForm() }, resetForm() { // 重置表单数据为初始状态 this.form = JSON.parse(JSON.stringify(this.initialForm)) } } ``` 注意:由于对象是引用类型,直接赋值可能导致初始数据被修改,所以这里使用深拷贝(通过JSON.parse(JSON.stringify()))来重置。 总结:在uni-app中清空表单数据,推荐使用以下方法: - 对于简单表单,直接重置每个绑定的数据为初始值(如空字符串)。 - 对于复杂表单,可以保存一份初始数据,在需要重置时用初始数据覆盖当前表单数据(注意深拷贝)。 - 如果使用uni-forms组件(uView UI等第三方组件库),它们通常提供reset方法,可以直接调用。 根据引用[4],如果使用的是uView的uv-form,那么它本身提供了resetFields方法,可以调用该方法来重置表单。但是,这里我们主要讨论的是uni-app官方form组件。 因此,我们优先推荐方法一和方法三,方法二由于需要操作隐藏按钮,且可能跨平台兼容性不好,所以作为备选。 最后,根据问题,用户想清空表单数据,我们可以根据用户使用的具体表单结构选择合适的方法。如果用户使用的是v-model绑定,那么直接重置数据是最简单有效的。</think>在 uni-app 中清空表单数据,可以通过以下几种方法实现(根据引用内容整理): ### 方法一:手动重置数据模型(推荐) 通过 `v-model` 绑定的数据,在提交后直接重置数据模型: ```html <template> <form @submit="formSubmit"> <uni-easyinput v-model="formData.username" placeholder="用户名" /> <uni-easyinput type="password" v-model="formData.password" placeholder="密码" /> <button form-type="submit">提交</button> </form> </template> <script setup> import { ref } from 'vue' const formData = ref({ username: '', password: '' }) const formSubmit = () => { // 提交逻辑... // 清空表单数据 formData.value = { username: '', password: '' } } </script> ``` **原理**:通过重置 `formData` 对象为初始空值[^2]。 --- ### 方法二:触发隐藏的重置按钮 利用原生 form 组件的 reset 功能: ```html <template> <form @submit="formSubmit" @reset="formReset"> <input name="username" v-model="formData.username" /> <button form-type="submit">提交</button> <!-- 隐藏的重置按钮 --> <button form-type="reset" ref="resetBtn" style="display:none"></button> </form> </template> <script setup> import { ref } from 'vue' const resetBtn = ref(null) const formData = ref({ username: '' }) const formSubmit = () => { // 提交后触发重置 resetBtn.value.$el.click() } const formReset = () => { console.log('表单已重置') } </script> ``` **注意**:此方法需要操作 DOM 元素[^3]。 --- ### 方法三:动态表单重置 对于动态生成的表单(如 `v-for` 循环),需递归重置数据结构: ```javascript // 在提交方法中 const resetDynamicForm = () => { formData.value.projectcontactArr = [{ role: null, name: null, phone: null }] } ``` 需根据数据结构深度重置数组或对象[^4]。 --- ### 方法四:使用 uView 表单组件 如果使用 uView 的 `uv-form` 组件: ```javascript // 获取表单实例 const formRef = ref(null) // 清空表单 const resetForm = () => { formRef.value.resetFields() } ``` --- ### 总结建议 1. **简单表单**:直接重置数据模型(方法一) 2. **复杂表单**:使用组件库的 reset 方法(方法四) 3. **特殊需求**:触发隐藏重置按钮(方法二) > 数据驱动视图是 Vue 的核心思想,直接操作数据模型是最推荐的方式[^2][^4]。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值