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

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="data: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对象

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

uni-app实现上传照片和个人信息相关推荐

YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用！
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用! ©YDOOK JYLin 1. 项目目录架构: Upload result: 上传结果 ...
exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）
exif.js解决ios手机上传照片后显示为旋转90度问题(兼容ios13.4 ) 问题描述: 在做手机移动端app时,发现iOS12.5.1版本(iphone6)上传照片出现顺时针旋转90问题,ip ...
uniapp修改个人头像或是上传照片，或者自拍
modufyimage(){const that = thisuni.chooseImage({count: 1, // 最多可以选择的图片张数,默认9/这里可以限制照片数量sizeType: ['o ...
uni-app 实现照片水印并上传照片
话不多说,直接代码 <template><view class="wrap"><u-form :model="model" ref ...
Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）...
Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...
5中打开safari_iOS13版Safari浏览器新功能上线：可调节上传照片大小
11月23日消息,据报道,配合iOS 13系统使用的Safari浏览器新增了许多人性化设定,可以根据用户的个人需求,有选择地进行使用,其中就包括可以调节上传照片大小的功能. 这项功能的使用十分便捷,用 ...
点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮，页面没有反应，无法拍摄人脸图片或上传照片，为什么？...
戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...
SSM+BJUI实现以Base64方式上传照片
场景点击添加--选择照片--点击保存--保存到数据库路径--页面展示. 实现前面实现照片上传可以用其他实现,这里是用BJUI来实现. 需要给后台action传过去base64Str. 添加页面代码 ...
使用axios上传照片
原来使用vue1.0的时候,我们一直使用ajax来发送请求,当接触新的项目的时候,我们使用了vue2.0,结合着使用了axios来代替ajax. 安装axios的话: 1-利用npm安装npm ins ...
android上传图片被旋转,input上传照片旋转解决办法
需求很简单:h5拍照上传照片,然后显示出来问题在:上传之后的图片在PC,IOS端均能正常显示,Android端显示的则是被旋转90度的. 直接上代码下面这个方法传入file对象,然后会去除掉照片中 ...

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

uni-app实现上传照片和个人信息相关推荐

最新文章

热门文章