uni.app提交按钮实现提交中与提交成功

该段代码检查用户是否已登录,如果已登录则显示加载提示并调用getGraphics接口,传入参数提交数据。如果提交成功,显示成功提示;否则,提示信息错误。若未登录,则重定向至登录页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

	subMit() {
				let token = uni.getStorageSync('token')
				if (token) {   //判断是否已经登录
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					getGraphics({
						ins_report: this.fileList1,
						...this.submitData
					}).then(res => {   //是一个数据接口请求
						console.log(res, '图文');
						if (res.msg == "提交成功") {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							});
						} else {
							uni.showToast({
								title: '信息有误,请重新输入',
								icon: 'none',
								duration: 1000
							});
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}


			},

### 在uni-app中使用uni.chooseImage选择图片并上传到后端 在uni-app中,`uni.chooseImage` 是用于从本地相册或相机选择图片的方法。选中的图片可以通过文件上传接口(如 `uni.uploadFile`)提交到后端[^1]。以下是实现该功能的完整示例代码: #### 示例代码 ```html <template> <view> <button type="primary" @click="chooseImg">选择图片</button> <image v-for="(item, index) in imgArr" :key="index" :src="item" mode="aspectFit" @click="previewImg(item)"></image> <button type="warn" @click="uploadImages">上传图片</button> </view> </template> <script> export default { data() { return { imgArr: [], // 存储选中的图片路径 uploadTaskList: [] // 存储上传任务 }; }, methods: { chooseImg() { uni.chooseImage({ count: 5, // 最多可以选择的图片张数 success: (res) => { this.imgArr = [...this.imgArr, ...res.tempFilePaths]; // 将选中的图片路径添加到数组中 }, fail: (err) => { console.error("选择图片失败", err); } }); }, previewImg(current) { uni.previewImage({ current, // 当前显示图片的链接/索引值 urls: this.imgArr // 需要预览的图片链接列表 }); }, uploadImages() { if (this.imgArr.length === 0) { uni.showToast({ title: "请先选择图片", icon: "none" }); return; } this.imgArr.forEach((filePath) => { const task = uni.uploadFile({ url: "https://example.com/upload", // 替换为你的后端接口地址 filePath, name: "file", // 后端接收的字段名 formData: { user_id: "12345" // 可以传递额外的表单数据 }, success: (uploadRes) => { console.log("上传成功", JSON.parse(uploadRes.data)); }, fail: (err) => { console.error("上传失败", err); } }); this.uploadTaskList.push(task); // 将上传任务保存到列表中 }); } } }; </script> <style> image { width: 100px; height: 100px; margin: 5px; } </style> ``` #### 说明 - 使用 `uni.chooseImage` 方法选择图片,并将返回的图片路径存储在 `imgArr` 中[^1]。 - 点击“上传图片”按钮时,遍历 `imgArr` 数组,调用 `uni.uploadFile` 方法将每张图片上传到后端。 - `uni.uploadFile` 的参数包括: - `url`: 后端接收图片的接口地址。 - `filePath`: 图片的临时路径。 - `name`: 后端接收的字段名。 - `formData`: 额外的表单数据(可选)。 - 成功或失败时分别调用 `success` 和 `fail` 回调函数处理结果。 #### 注意事项 - 确保后端接口支持文件上传,并正确配置了接收字段名。 - 如果需要监控上传进度,可以使用 `task.onProgressUpdate` 方法[^1]。 - 测试时,请替换 `url` 参数为实际的后端接口地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值