uniapp 表单提交加上传文件

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

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

enctype=“multipart/form-data”

uniapp微信小程序

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;  //转换MBif(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;}}})}}
}

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

uniapp 表单提交加上传文件相关推荐

php的表单提交之上传文件
首先创建含表单的html文件:upload.html <!DOCTYPE html> <html> <head lang="en"><me ...
uniapp表单提交，传值picker
uniapp表单提交,传值picker 套用就好,里边有picker,input传值方法. 先上代码!!! <template><view class="content&q ...
Qt——记录：http表单格式上传文件到七牛云和阿里云
环境:windows10 版本:Qt 5.15.2 工具:Qt Creator 背景:通过http表单格式上传文件,兼容阿里云和七牛云. 一.记录问题:上传文件到阿里云问题1:ErrorCode: ...
传统form表单提交方式的文件上传与文件存储
引言时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...
java http 表单提交_java模仿http表单提交数据(含文件上传)实例源码
[实例简介]java模仿http表单提交数据.模仿http表单上传文件示例 [实例截图] [核心代码] package com.snca.cloudsign.main; import java.io. ...
ajax 提交form表单，上传文件
参考 :https://blog.csdn.net/gu_wen_jie/article/details/72177714 注意:使用layui 按钮提交表单时,按钮会默认提交表单.解决如下: $(' ...
dwz 表单提交 html,dwz 文件上传表单提交分析
众所周知,因为Ajax不支持enctype="multipart/form-data".所以如果想采用无刷新的方式提交文件,Ajax是不行的.采用变通,也是最简单有效的方式是在页面 ...
dwz 表单提交 html,DWZ文件上传表单提交
文件上传表单提交因为Ajax不支持enctype="multipart/form-data" 所以用隐藏iframe来处理无刷新表单提交. 或服务器端响应 DWZ-v1.2版本 ...
Android Okhttp3的使用（很全面，包含Post提交字符串、键值对、表单、上传文件、无参请求和Get有参无参请求，还有自动添加token）
Okhttp简介 okhttp是现代化应用程序的网络通信的方式.它用来帮助程序交换数据和媒体信息,使用okhttp可以让你的程序加载物料(翻译为服务器数据更合适在)更加高效.更节省网络带宽. okht ...

uniapp 表单提交加上传文件

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

uniapp微信小程序

uniapp 表单提交加上传文件相关推荐

最新文章

热门文章