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; //转换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;
}
}
})
}
}
}
注：第一次发帖，有很多不足之处，代码显得比较冗长，望各位大神指出，本人虚心学习并改进。