uniapp 表单提交加上传文件

最新推荐文章于 2024-03-04 14:23:18 发布
最新推荐文章于 2024-03-04 14:23:18 发布
阅读量3.7k 收藏 23
点赞数 6
分类专栏： uni-app 微信小程序 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45878719/article/details/120882953
版权

uniapp实现表单提交带图片上传

在做表单提交的时候，我们可能面临有图片上传，放在原生的html就好解决，form标签加上

enctype=“multipart/form-data”

uniapp微信小程序

1.原图
在这里插入图片描述在这里插入图片描述

  1. template
    <form :model="data" @submit="submit" @reset="">
		<view class="top bgbai u-m-t-30" :class="{disabled: !isaction && data.renz.id}">
				<view class="u-flex item">
					<view class="left required">公司全称</view>
					<input type="text" placeholder-class="line" v-model="data.renz.name" placeholder="请填写公司全称" />
				</view>
				<view class="u-flex item">
					<view class="left required">纳税人识别号</view>
					<input type="number" maxlength="20" placeholder-class="line" v-model="data.renz.ident" placeholder="请填写纳税人识别号" />
				</view>
				<view class="u-flex item">
					<view class="left required">公司地址</view>
					<input type="text" class="u-flex-1" v-model="data.renz.code1" placeholder-class="line" placeholder="请填写公司地址" />
				</view>
				<view class="u-flex item">
					<view class="left required">公司电话</view>
					<input type="text" placeholder-class="line" v-model="data.renz.phone" placeholder="请填写公司电话" />
				</view>
				<view class="u-flex item">
					<view class="left required">开户行</view>
					<input type="text" placeholder-class="line" v-model="data.renz.khyh" placeholder="请填写开户行" />
				</view>
				<view class="u-flex item">
					<view class="left required">开户行账户</view>
					<input type="text" placeholder-class="line" v-model="data.renz.khhuser" placeholder="请填写开户行账户" />
				</view> 
				<view class="item permit u-flex-col">
					<view class="left u-m-b-15 required">营业执照:</view>
					<view>
						<view class="yingyezhizhao" @click="zhizhaoFile">
							<image :src="tempAvatar ? tempAvatar : Img" mode="aspectFit"></image>
							<view class="mycolse" v-show="isdel" @click.stop="removeTemp">
								<u-icon name="close-circle-fill" size="46" color="#000000"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="filetip xsize">
					只支持中国大陆工商局或市场监督管理局颁发的工商营业执照，且必须在有效期内， 请格式要求:原件照片，扫描件或者加盖公章的复印件，支持.jpg.jpeg.gif.png 格式照片大小不超过2M上传最新的营业执照。
				</view>
				<view class="u-flex-col item permit">
					<view class="left u-m-b-15">经营范围:</view>
					<textarea 
					 class="fwtextarea"
					 v-model="data.renz.fanwei"
					 placeholder="一般经营范围"
					 placeholder-class="line" 
					 maxlength="200"
					 />
				</view>
				<view class="checkAddress between u-font-28 u-m-t-30" @click="setmrAddress">
					<text class="checkTxt">是否与默认收货地址一致</text>
					<text class="goTo">点击前往>></text>
				</view>
				<view class="bgbai drawer" :class="{disabled: !isaction && data.renz.id}">
			<view class="u-flex item">
				<view class="left required">收票人姓名</view>
				<input type="text" placeholder-class="line" v-model="data.userc.shname" placeholder="请填写收票人姓名" />
			</view>
			<view class="u-flex item">
				<view class="left required">收票人手机</view>
				<input type="text" placeholder-class="line" v-model="data.userc.tel" placeholder="请填写收票人手机" />
			</view>
			<view class="u-flex item" @tap="showgcsPicker">
				<view class="left required">收票人省份</view>
				<input type="text" placeholder-class="line" v-model="data.userc.provice" disabled class="u-flex-1" placeholder="选择省/市/区" />
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="u-flex item">
				<view class="left required">详细地址</view>
				<input type="text" placeholder-class="line" v-model="data.userc.address" placeholder="街道、楼牌号等" />
			</view>
			<view class="btn-wrap center u-flex-col u-m-t-50" v-show="!data.renz.id || isaction">
				<u-button class="btn center" :custom-style="btnSytle" hover-class="none" shape="circle" @click="submit">提交</u-button>
			</view>
			</view>
	</form>

3.js部分

<script>
import {checkStr, checkAddressCode, orgcodevalidate} from '@/common/js/util'
export default {
   data(){
   		return {
   			data: {
   				renz: {
   					name: '',
   					ident: '',
   					code1: '',
   					phone: '',
   					khyh: '',
   					khhuser: '',
   					fanwei: ''
   				},
   				userc: {
   					shname: '',
   					tel: '',
   					provice: '',
   					address: ''
   				}
   			},
   			show: false,
   			imgaction: 'index.php?m=Wxapi&c=User&a=engineer',
   			CDN: this.CDN,
   			stateArr:['审核中','审核完成','工程商认证审核未通过'],
   			colorArr:['#ff0000','#08bb71','#999999'],
   			isaction: false,
   			isdel: false,
   			btnSytle: {
   				width: '100%',
   				height: '80rpx',
   				fontSize: '32rpx',
   				borderRadius: '40rpx',
   				color: '#fff',
   				backgroundColor: 'transparent',
   				backgroundImage: 'linear-gradient(to left, rgb(250, 176, 34) ,#f83600)'
   			},
   			tempAvatar: '',
   			Img: '/static/icon/cream.png',
   			filesize: 0,
   			isModel: false  //是否显示模态框
   		}
   	},
   	methods: {
   	// 上传营业执照
   		zhizhaoFile(){
   			let that = this;
   			uni.chooseImage({
   				count: 1,
   				sizeType: 'original',  //指定原图
   				success: res=> {
   					that.filesize = res.tempFiles[0].size/1024/1024;  //转换MB
   					if(that.filesize > 1){
   						that.$util.msg('上传文件大小不能超过1MB');
   						return;
   					}
   					that.tempAvatar = res.tempFilePaths[0];
   				},
   				error: err=>{
   					console.log(err)
   				}
   			})
   		},
   		// 提交认证
   		submit(){
   			const userid = uni.getStorageSync('uniIdToken') || 0;
   			if(userid <= 0){
   				this.$util.msg('请先登录!');
   				return;
   			}
   			const datas = this.data.renz;
   			const userdata = this.data.userc;
   			if(!datas.name){
   				this.$util.msg('请输入公司全称');
   				return;
   			}
   			if(datas.ident){
   				if(!checkStr(datas.ident, 'zzsnsno')){
   					this.$util.msg('纳税人识别号位数限制为15、18、20位，请检查');
   					return;
   				}else{
   					let addressCode = datas.ident.substring(0,6);
   					let ischeck = checkAddressCode(addressCode);
   					if(!ischeck){
   						this.$util.msg('请输入正确的纳税人识别号 (地址码)');
   						return;
   					}else{
   						// 校验组织机构代码
   						let orgCode = datas.ident.substring(6, 9);
   						let istrue = orgcodevalidate(orgCode);
   						if(!istrue){
   							this.$util.msg('请输入正确的纳税人识别号 (组织机构代码)');
   							return;
   						}
   					}
   				}
   			}else{
   				this.$util.msg('请输入纳税人识别号');
   				return;
   			}
   			if(!datas.code1){
   				this.$util.msg('请输入公司地址');
   				return;
   			}
   			if(!datas.phone){
   				this.$util.msg('请输入公司电话');
   				return;
   			}
   			if(datas.khyh){
   				if(!checkStr(datas.khyh, 'chinese')){
   					this.$util.msg('开户行须为中文');
   					return;
   				}
   			}else{
   				this.$util.msg('请输入开户行');
   				return;
   			}
   			if(datas.khhuser){
   				if(!checkStr(datas.khhuser, 'number')){
   					this.$util.msg('开户行账户格式错误');
   					return;
   				}
   			}else{
   				this.$util.msg('请输入开户行账户');
   				return;
   			}
   			if(this.tempAvatar){
   				if(this.filesize > 1){
   					this.$util.msg('上传文件大小不能超过1MB');
   					return;
   				}
   			}else{
   				this.$util.msg('请上传营业执照');
   				return;
   			}
   			if(!userdata.shname){
   				this.$util.msg('请输入收票人姓名');
   				return;
   			}
   			if(userdata.tel){
   				if(!checkStr(userdata.tel, 'mobile')){
   					this.$util.msg('手机号码格式错误');
   					return;
   				}
   			}else{
   				this.$util.msg('请输入收票人手机号码');
   				return;
   			}
   			if(!userdata.provice){
   				this.$util.msg('请选择地区');
   				return;
   			}
   			if(!userdata.address){
   				this.$util.msg('请输入详细地址');
   				return;
   			}
   			var obj = Object.assign(datas,userdata);
   			obj = JSON.parse(JSON.stringify(obj));
   			obj.uid = userid;
   			// obj.shname = userdata.name;
   			uni.showLoading({
   				title: '提交中...',
   				mask: true
   			})
   			if(this.tempAvatar === this.CDN + this.data.renz.pic1){
   				// 旧图片未修改
   				this.oldUpload(obj);
   			}else{
   				// 重新上传图片
   				this.yesUpload(obj);
   			}
   		},
   		// 旧图片未改调用
   		async oldUpload(data){
   			const res = await this.$request.post(this.imgaction,data);
   			if(res.status === 200){
   				uni.hideLoading();
   				this.$util.msg(res.msg);
   				this.isaction = this.isdel = false;
   				if(res.data.renz){
   					this.data.renz = res.data.renz;
   					this.data.renz.khyh = res.hang;
   					this.data.renz.khhuser = res.hangzh;
   				}
   				if(res.data.userc){
   					this.data.userc = res.data.userc;
   					this.data.userc.shname = res.data.userc.name;
   					delete res.data.userc.name;
   				}
   			}else{
   				uni.hideLoading();
   				this.$util.msg(res.msg);
   				return;
   			}
   		},
   		//重新上传图片调此方法
   		yesUpload(data){
   			uni.uploadFile({
   				url: this.CDN + this.imgaction,
   				filePath: this.tempAvatar,
   				name: 'pic1',
   				formData: data,  //顺带整个表单对象传给服务端
   				success: (res) => {
   					const resultData = JSON.parse(res.data)
   					if(resultData.status === 200){
   						uni.hideLoading();
   						this.$util.msg(resultData.msg);
   						this.isaction = this.isdel = false;
   						if(resultData.data.renz){
   							this.data.renz = resultData.data.renz;
   							this.data.renz.khyh = resultData.hang;
   							this.data.renz.khhuser = resultData.hangzh;
   						}
   						if(resultData.data.userc){
   							this.data.userc = resultData.data.userc;
   							this.data.userc.shname = resultData.data.userc.name;
   							delete resultData.data.userc.name;
   						}
   					}else{
   						uni.hideLoading();
   						this.$util.msg(resultData.msg);
   						return;
   					}
   				}
   			})
   		}
   	}
}

注：第一次发帖，有很多不足之处，代码显得比较冗长，望各位大神指出，本人虚心学习并改进。

前端伟
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不用form提交表单，用ajax上传文件
05-22
不用form提交表单，用ajax异步上传文件，使用jdk8版本，否则可能无法运行
uniapp(三) 之 表单提交
沉淀，积累、进步
06-06 1656
vue3环境下uni-forms的使用与校验
uniapp formdata 单文件上传
最新发布
weixin_50236740的博客
03-04 546
【代码】uniapp formdata 单文件上传。
uniapp 表单页面_uniapp form表单提交，数据格式验证
weixin_29349409的博客
02-11 2674
uniapp form表单提交，数据格式验证前端页面姓名：性别：男女出生日期：患者电话：初步诊断：检查项目：JSmethods: {formSubmit:function(e){let tmp = JSON.stringify(e.detail.value)console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))...
uniapp--表单：form
魏依一的博客
02-06 1665
携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。单项选择器，内部由多个 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。e中为表单中传过来的值。
《uni-app》表单组件-form表单
Oliver尹的博客
09-21 1万+
From，表单组件，具有数据收集、提交数据的功能，某种程度上说它就是一个容器，这个容器内部可以有 input 、checkbox、radio 、picker 等组件填充，原则上所有的表单组件都必须置入from组件，再通过form组件收集内部组件数据并将内容通过接口发送至后台接收～
php实现表单提交上传文件功能
12-19
本文实例为大家分享了php实现表单提交上传文件功能的具体代码，供大家参考，具体内容如下 首先创建含表单的html文件：upload.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF...
php curl模仿form表单提交图片或文件
01-13
php curl模仿form表单提交图片或文件 用的tp5做的例子
JQuery异步提交表单与文件上传功能示例
10-20
主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下
Asp.Net模拟表单提交数据和上传文件的实现代码
01-03
此时需要在自己的网站做一个动态页作为代理，将表单提交到动态页，动态页负责将表单的内容使用WebClient或HttpWebRequest将表单数据再上传到远程服务器，由于在服务器端进行操作，就不存在跨域问题了。 WebClient...
layui实现form表单同时提交数据和文件的代码
10-16
今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app.02.提交form表单的两种方式
热门推荐
潮汐先生的专栏
03-17 1万+
uni-app提交form表单的两种方式uni-app提交form表单的两种方式form表单元素较少form表单元素较多前端代码举例：后端java代码举例 uni-app提交form表单的两种方式 form表单元素较少 比如用户登录，如下图 此时html代码如下，省略了部分多余代码 <template> <view style="padding:50rpx;"> <view style="margin-top:60rpx;"> <form @submi
uniapp实现表单提交带图片上传 在做表单提交的时候，我们可能面临有图片上传，放在原生的html就好解决，form标签加上
Gblfy_Blog
05-14 4181
enctype=“multipart/form-data” uniapp微信小程序 1.原图 页面部分 <form :model="data" @submit="submit" @reset=""> <view class="top bgbai u-m-t-30" :class="{disabled: !isaction && data.renz.id}"> <view class="u-flex item"> <view
uniapp---form（4）---from表单的应用
m0_75047254的博客
07-28 2354
第一步：添加一个按钮，并且按钮的form-type属性添加为submit。想要在form表单的submit中得到值。这需要为其添加上name属性。第三歩：在生命周期methods里创建formSubmit方法接受值。第一步：添加一个按钮，并且按钮的form-type属性添加为reset。第三歩：点击reset按钮，即可清空form表单的内容。第二歩：在form表单的组件中添加事件 @submit。第二歩：在form表单的组件中添加事件 @reset。（1）使用submit提交表单获取信息。
uniapp 表单提交图片跟其他填写数据_在线数据收集及数据协同的办法
weixin_39671509的博客
11-24 398
之前老是看到很多人提出数据收集、数据共享协同的相关问题。因此，就打算分享以下个人的经验。 首先，在数据收集、管理、共享协同方面本人曾经也做过很多渠道，很多方向的研究，中间踩过不少坑浪费过很多精力，希望后面的人可以避开。 实际上关于数据收集问题，办法非常多，有各种收费的表单工具、自建文件服务器、WEB应用等等。在此举一个例子以供参考。如公司有IT大牛、OA、ERP、BPM这些...
uni-app提交表单数据到后端
TANKING，开源开发者！
08-19 6296
要想接收表单数据，首先要在表单进行数据的绑定，我们可以使用v-model="keyword"进行绑定。 然后在js获取这个绑定的值。 index.vue <template> <view> <view class="search-con"> <view class="form-con"> <form class="search-form"> <input
html5提交form表单数据到后台,uni-app提交表单到后端，接收表单数据
weixin_33428129的博客
06-05 1344
要想接收表单数据，首先要在表单进行数据的绑定，我们可以使用v-model="keyword"进行绑定。然后在js获取这个绑定的值。index.vue提交jsexport default {data() {return {}},methods: {keyword(e){// 获取表单值let kw = this.keyword;console.log(kw);}}}Author:TANKINGWeb...
uni-app中如何获取表单数据
weixin_70617457的博客
01-05 2216
给checkbox-group绑定change事件，将获取到的值赋值给 this.hobby = event.detail.value。button按钮通过 form-type=“sunmit” 触发submit事件。给form添加submit事件，获取表单的值。方法一：通过数据绑定方式，获取表单数据。方法二：通过form表单的方式。
uni-app 下拉框提交表单至后台遇到的问题
weixin_49393290的博客
12-08 1040
首先去uni-app官网，查看这个表单选择器 官网建议您下载一下项目查看完整代码 然后通过官网给的文档您写代码 <view class="row b-b"> <text class="tit">性别</text> <!-- {{user1.GENDER==0?'未知':user1.GENDER==1?'女':'男'}} --> <!-- <input cl..
uniapp收货地址弹出框
08-13
收货地址弹出框是在uniapp中使用chooseAddress方法后弹出的。你可以在代码中调用uni.chooseAddress()方法来使用选择收货地址的功能。该方法返回一个数组，第一项是错误对象，第二项是成功选择后的收货地址对象。你可以根据返回的结果进行相应的操作。如果用户成功选择了收货地址，你可以通过updateAddress方法来更新vuex中的收货地址。如果用户没有授权或者授权请求没有响应，你可以在if语句判断中调用reAuth方法重新向用户发起授权申请。根据你提供的代码，你可以将chooseAddress方法中的代码进行修改，以满足用户没有授权时的判断条件。修改后的代码可以是这样的： async chooseAddress() { const [err, succ = await uni.chooseAddress().catch(err => err) if (succ && succ.errMsg === 'chooseAddress:ok') { this.updateAddress(succ) } if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) { this.reAuth() } } 这样修改后的代码会在用户没有授权时正确处理并执行相应的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp解决收货地址授权失败的问题](https://blog.csdn.net/wam923259736/article/details/124379788)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [解决uniapp中地址授权失败](https://blog.csdn.net/qq_45547094/article/details/126342941)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值