uni-app实现上传照片和个人信息

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量2.2k 收藏 19
点赞数 2
分类专栏： uni-app 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moshubai/article/details/115349796
版权

1.本项目是上传个人照片和部门信息和姓名，可以运行于小程序，安卓和IOS手机app

下载Hbuilder，创建一个uni-app项目，在page下面创建一个路径，创建一个vue页面

<template>
    <view class="page">
     <uni-nav-bar  color="#FFFFFF" leftIcon="back"  backgroundColor="#3088C9" @clickLeft="backToLastPage()" title="上传员工信息"></uni-nav-bar>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <view class="uni-uploader-head">
                    <view class="uni-uploader-title"></view>
                    <view class="uni-uploader-info"></view>
                </view>
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
                                <view class="close-view" @click="close(index)">x</view>
                            </view>
                        </block>
                       
                    </view>
                </view>
				<view  class="uni-uploader__input-box" v-if="imageList.length ==0">
				    <view class="uni-uploader__input"  @tap="chooseImg"></view>
				</view>
				
			
            </view>
        </view>
         <view class="btnline">
         					 <view class="btnlable">学生手机号</view>
         					<view class="btnres" >
         						
         						       <view class="uni-input">{{enrollId}}</view>
         						    
         					</view>
         				
         	</view>
         	
         	<view class="btnline">
         					 <view class="btnlable">学生姓名</view>
         					<view class="btnres" >
         						
         						        <view class="uni-input">{{nameStr}}</view>
         						   
         					</view>
         				
         	</view>
         	<view class="btnline">
         			 	<view class="btnlable">宿舍楼</view>
         			 	<view class="btnres" >
         			 	<picker mode="selector" @change="bindPickerChange2" :value="index" :range="arrayper" :range-key="'name'" >
         			 	                        <view class="uni-input">{{arrayper[index].name}}</view>
         			 	                    </picker>
         			 	</view>
         			 
         							 
         	     
         	</view>	
        <button  class="btn" @tap="send">提交</button>
       
    </view>
</template>

<script>
	
    export default {
		components: {
				 
				
				  },
				mounted() {
					this.getDepartmentList();
					//this.departmentId
				},
        data() {
            return {
                msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
                stars: [1, 2, 3, 4, 5],
                imageList: [],
				enrollId:uni.getStorageSync('tempStaffNum'),
				defaulttext:'',
				enrollIdValid:'必填',
				staffNumber:0,
				staffNumberValid:'必填',
				departmentId:0,
				nameStr:uni.getStorageSync('staffName'),
				nameStrValid:'必填',
				staffId:uni.getStorageSync('staffId'),
				index:0,
				token:uni.getStorageSync('token'),
				arrayper: [{id:'',name:''}], 
                sendDate: {
                    score: 0,
                    content: "",
                    contact: ""
                }
            }
        },
        onLoad() {
     
        },
        methods: {
	        enrollidInput: function(event) {
	        		            this.enrollId = event.target.value;
								this.validEnrollId();
	        	    },
	        staffIdInput: function(event) {
	                    this.staffNumber = event.target.value;
						this.validStaffNumber();
	                },
	        nameInput: function(event) {
	        		            this.nameStr = event.target.value;
								if(this.nameStr.length<=0){
									this.nameStrValid='姓名不能为空';
									}else{
									this.nameStrValid='验证通过';
										}
										
	        	    },
	        bindPickerChange2: function(e) {
	                 console.log('picker发送选择改变，携带值为', e.detail.value)
	                 this.index = e.detail.value;
	                 this.departmentId=this.arrayper[this.index].id;
					 console.log('部门编号'+this.array[this.index].id)
	               },
            close(e) {
                this.imageList.splice(e, 1);
            }, 
            chooseMsg() { //快速输入
                uni.showActionSheet({
                    itemList: this.msgContents,
                    success: (res) => {
                        this.sendDate.content = this.msgContents[res.tapIndex];
                    }
                })
            },
			backToLastPage(){
					 uni.navigateBack();
			},
			
            chooseImg(index) { //选择图片
                uni.chooseImage({
                    sourceType: ["camera",'album'],
                    sizeType: "compressed",
                    count: 1 - this.imageList.length,
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths);
						console.log('图片路径'+this.imageList)
					//	this.previewImage()
					uni.getImageInfo({
					            src: res.tempFilePaths[0],
					            success: function (image) {
					                console.log("宽度"+image.width);
					                console.log("高度"+image.height);
					            }
					        });
                    }
                });
				
            },
           
            previewImage(index) { //预览图片
			      
                uni.previewImage({
                    urls: this.imageList,
                    current: this.imageList[index]
                });
            },
            send() { //发送反馈
                console.log('开始发现');
                if (this.imageList.length === 0) {
                    uni.showModal({
                        content: '至少选择一张图片',
                        showCancel: false
                    })
                    return
                }
             
			/* uni.showModal({
			     content: '至少选择一张图片',
			     showCancel: false
			 }) */
                uni.showLoading({
                    title: '上传中...'
                }) 
                let imgs = this.imageList.map((value, index) => {
                    return {
                        name: "pic" + index,
                        uri: value
                    }
                })
                // TODO 服务端限制上传文件一次最大不超过 2M, 图片一次最多不超过5张
				console.log('token'+this.token)
				console.log("相片路径"+this.imageList[0])
				console.log("上传数据"+"注册号"+this.enrollId+"工号"+this.staffNumber+"名字"+this.nameStr+"部门编号"+this.departmentId)
                uni.uploadFile({
                    url: "你的url",
                    filePath: this.imageList[0],
                    name: 'pic',
                    formData: {
						'photoNew':this.enrollId,
						'staffId':this.staffId
					},
					header:{
					'Content-Type': 'multipart/form-data',
					'Authorization': this.token},
                    success: (res) => {
                        console.log('请求成功'+res.data)
					var jsonObject=JSON.parse(res.data);
					 var result2=jsonObject.result;
						if(result2==200){
						  
							uni.showModal({
							    title: '提示',
							    content: '上传成功',
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
							          //  console.log('用户点击确定');
								//	window.location.reload();
								//this.defaulttext='';
							        } 
							    }
							});
							return
							} 
                    },
                    fail: (res) => {
                        uni.showToast({
                        title:"上传失败",
                        icon:'none'
                         }); 
                    } ,
                    complete() {
                        uni.hideLoading()
                    } 
                });
            },
			getDepartmentList(){
				var url='你的url';
				uni.request({
				         url:url,
				 			       
				 			 		method:'GET',
				 			 		timeout:10000,
				 			 		header:{
							  		'content-type': 'application/json',
				 			 		'Authorization': this.token},
				 			 		dataType:'json',
				 			 		success: res=>{
				 			 	//	console.log("请求成功"+this.token);
				 			 		if(res.data.result==200){
				 			 		console.log(res.data.data[0].name)
				 			 				for (var i = 0; i < res.data.data.length; i++) {
				 			 				
				 			 				this.arrayper=res.data.data;
				 			 				//this.approveId=this.arrayper[0].id;
											//console.log(res.data.data[0].name)
											this.departmentId=this.arrayper[0].id;
				 			 				}
				 			 						
				 			 				}
				 			 				},
				 			 				fail: (err) => {
				 			 					
				 			 				}
				          }) 
			},
			validEnrollId(){
				var url='你的url?enrollId='+this.enrollId;
				uni.request({
				         url:url,
				 			       
				 			 		method:'GET',
				 			 		timeout:10000,
				 			 		header:{
							  		'content-type': 'application/json',
				 			 		'Authorization': this.token},
				 			 		dataType:'json',
				 			 		success: res=>{
				 			 		//console.log("请求成功"+this.token);
				 			 		if(res.data.result==200){
				 			 		this.enrollIdValid='注册号已存在';
				 			 						
				 			 				}else{
												this.enrollIdValid='验证通过';
											}
											},
				 			 				fail: (err) => {
				 			 					
				 			 				}
											
				          }) 
			},
			
			validStaffNumber(){
				var url='你的url?staffCode='+this.staffNumber;
				uni.request({
				         url:url,
				 			       
				 			 		method:'GET',
				 			 		timeout:10000,
				 			 		header:{
							  		'content-type': 'application/json',
				 			 		'Authorization': this.token},
				 			 		dataType:'json',
				 			 		success: res=>{
				 			 		console.log("请求成功"+this.token);
				 			 		if(res.data.result==200){
				 			 		this.staffNumberValid='员工号已存在';
				 			 						
				 			 				}else{
												
												this.staffNumberValid='验证通过';
												}
											},
				 			 				fail: (err) => {
				 			 					
				 			 				}
											
				          }) 
			},
        }
    }
</script>

<style>
    page {
        background-color: #EFEFF4;
    }
    .input-view {
        font-size: 28rpx;
    }
    .close-view {
        text-align: center;
        line-height: 14px;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #FF5053;
        color: #FFFFFF;
        position: absolute;
        top: -6px;
        right: -4px;
        font-size: 12px;
    }
	.feedback-body {
		background: #fff;
		
	}
	.feedback-uploader {
		padding: 22rpx 20rpx;
	}
	.uni-uploader {
		flex: 1;
		flex-direction: column;
	}
	.uni-uploader-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-uploader-info {
		color: #B2B2B2;
	}
	.uni-uploader-body {
		margin-top: 16rpx;
	}
	.uni-uploader__files {
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
	}
	.uni-uploader__file {
		margin-left: 100px;
		width: 300rpx;
		height: 300rpx;
		
	}
	.uni-uploader__img {
		display: block;
		width: 300rpx;
		height: 300rpx;
		
	}
	.uni-uploader__input-box {
		position: relative;
		margin-left: 100px;
		width: 300rpx;
		height: 300rpx;
		border: 2rpx solid #D9D9D9;
	}
	.uni-uploader__input-box:before,
	.uni-uploader__input-box:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}
	.uni-uploader__input-box:before {
		width: 4rpx;
		height: 79rpx;
	}
	.uni-uploader__input-box:after {
		width: 79rpx;
		height: 4rpx;
	}
	.uni-uploader__input-box:active {
		border-color: #999999;
	}
	.uni-uploader__input-box:active:before,
	.uni-uploader__input-box:active:after {
		background-color: #999999;
	}
	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.btnline{
		margin-top: 20rpx;
		height: 80rpx;
		width: 100%;
		
	}
	.btnline2{
		margin-top: 10rpx;
		height: 870rpx;
		width: 100%;
		
	}
	.btnlable{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 26%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
	.btnres{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 68%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
	.btndate{
		margin-left: 10rpx;
		height: 80rpx;
		font-size: 30rpx;
		width: 40%;
		text-align: center;
		line-height: 80rpx;
		background: #FFFFFF;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
	.btn{
		margin-top: 100rpx;
		margin-left: 8%;
		height: 80rpx;
		font-size: 30rpx;
		width: 84%;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #f9624f;
		border: solid 1px #F0F0F0;
		border-radius:6px; 
		float: left;
	}
</style>

 运行效果如下

可以根据自己的需求修改，后台的数据接收接口如下

StaffAppForm对象

有兴趣的，可以自己试着修改，运行

 

白鹿依山近
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
手机个人中心模板
01-13
手机个人中心模板，ios9风格。超级好看
uni-app开发知识付费系统个人中心界面
时光依旧的博客
09-25 2492
hello 大家好，我是老张，那个不务正业的PHP开发工程师。今天是我使用uni-app开发在线教育系统的第三天了，今天主要开发了底部菜单的，学习页面，个人中心页面，先给大家预览下效果图 目前底部菜单页面已经全部开发完毕了，下面就是首页导航切换的静态页面开发了，关于这两个页面的布局我采用了uni-app 里面的flex 布局开发，Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件...
uniapp获取用户信息（登录及个人中心页面的实现）
weixin_48952990的博客
07-27 7850
uniapp获取用户信息（登录及个人中心页面的实现）
uniapp实现个人信心编辑页【头像上传、性别选择等，看完就能找到工作
m0_60721695的博客
03-28 300
school:[‘清华大学’,‘北京大学’,“复旦大学”,‘南京大学’],intrduction:“我爱睡觉”,userName:“张三”,sex:[‘男’,‘女’]
使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据
Korey__的博客
09-01 2262
这样，每点击一次 “添加表单项” 按钮，就会新增一个表单项，并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除” 按钮可以移除对应的表单项。
uni-app微信小程序——商城（6）——我的主页
徐小硕—心之所向，素履以往
08-18 8254
本篇文章要介绍微信小程序商城最重要的内容——我的主页，“我的”这个页面内容包含了太多的东西，比如用户的个人信息，订单内容，地址管理，客服电话等等。所以它成为了整个功能模块中最为重要的部门，本篇文章将只会介绍页面的设计和功能模块的规划，其他内容将会在后续文章中一一介绍。 效果图如下所示： “我的”页面主要包括三个模块：个人积分及优惠券模块、订单内容模块、地址管理和客服联系等模块。三个模块基本包含了“我的”功能模块的基本内容，如果后续有具体的内容更新，还会在里面添加新的内容。 代码内容如下： &l
uni-app开发微信小程序个人中心页面适用头条/百度/支付宝小程序
qq_16800845的博客
03-02 7700
<template> <view class="container"> <view class="user-section"> <image class="bg" src="/static/user-bg.jpg"></image> <view cl...
uni-app实战仿微信app开发
03-08
适用人群具有Html+Css+JavaScript基础，有一定的Vue.js基础，挑战高薪职位课程概述本季度为uni-app + egg.js 实战仿微信app和小程序全栈开发，开启纯nvue原生渲染，大大提高性能。一次开发，同时搞定Android、iOS和小程序端等。课程大纲见以下图！
uni-app中表单修改用户信息
Amelian的博客
11-06 3203
总结部分： 其中主要包括两个部分，一是用户信息的存储，二是用户信息的更改 对于用户的信息，因为这是在整个App中都是需要用到的，因此一般讲用户的信息保存在本地缓存中。每次需要用户信息的时候，只需要判断本地缓存中是否存在即可。 对于用户信息的保存，一般是在你登录的时候，后台便将用户信息一同返回，此时你变可以将信息与用户token值一同保存。但是如果后台没有给你返回，一般也会有个人信息的请求，这时候你便可以判断用户是否登录了，如果登录了便请求个人信息的接口，根据接口返回的数据（即用户信息保存） 通常需要
uniapp简单的身份证照片（正反面）上传
weixin_48196628的博客
04-07 6770
这是没有进行身份证照片验证的 如果要判断上传的图片是否为身份证 可以参考阿里云的 阿里云身份证验证超链接 最后放上了上传身份证图片的人像框和国徽框 wxml <template> <view class="ID-mian"> <h3>身份证正面(上传)</h3> <view class="card-zheng"> <view class="zheng_left" v-show="isShow"> <ima
10.2 个人中心数据处理｜uni-app 项目实战（个人信息页功能模块）｜uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战
08-31
10.2_个人中心数据处理｜uni-app_项目实战（个人信息页功能模块）｜uni-app_&_uniCloud_从零入门开发《
Uni-app 实现图片上传、删除、预览、压缩；
02-19
Uni-app 实现图片上传、删除、预览、压缩； 真正的开箱即用。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app列表项实现左划操作功能
02-25
uni-app列表项实现左划操作功能。 开箱即用。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 612
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 343
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
uni-app和uni-app x的区别
02-23
uni-app是一款基于Vue.js开发的跨平台应用框架，它可以使用一套代码同时构建运行在多个平台（包括iOS、Android、H5等）的应用程序。uni-app提供了丰富的组件和API，开发者可以使用Vue.js的语法进行开发，并且可以通过插件扩展功能。 而uni-app x是uni-app的升级版本，它在uni-app的基础上进行了一些改进和优化。主要的区别如下： 1. 性能优化：uni-app x在性能方面进行了优化，提升了应用的运行效率和响应速度。 2. 构建工具升级：uni-app x使用了新的构建工具，提供了更好的开发体验和更高效的构建过程。 3. 新增特性：uni-app x引入了一些新的特性，如增强型编译模式、全局样式隔离等，使开发者能够更灵活地进行应用开发。 4. 兼容性改进：uni-app x对不同平台的兼容性进行了改进，提供了更好的跨平台适配能力。 总之，uni-app x是对uni-app的升级和改进，旨在提供更好的开发体验和更高效的应用性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值