uni-app 图片上传(uploadFile)
Posted 我1我1我1
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 图片上传(uploadFile)相关的知识,希望对你有一定的参考价值。
uni-app 图片上传在实际操作中的问题
图片在不改变是如何触发接口和uni-app的uni.uploadFile方法里面的字段对应
<template> <wiew> <view class="touxiangicon" @click="upload"> <image class="huiyuan_img" :src="image" mode=""></image> </view> <view class="queding"><button class="save" @click="save">保存</button></view> </wiew> </template> <script> </script> export default { data(){ iconcheck:0, //头像是否改变 image:this.httpUrl+‘file/static/uptouxiang.png‘, //默认头像 }, methods:{ <!-- 上传头像 --> upload(){ _self = this; uni.chooseImage({ count: 1, sizeType: [‘original‘, ‘compressed‘], //可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album‘], //从相册选择 success: function (res) { const tempFilePaths = res.tempFilePaths; _self.image = tempFilePaths[0]; console.log("tempFilePaths[0]",tempFilePaths[0]) //能够打印出选中的图片 _self.iconcheck = 1;//点击后图片更改状态由0变成1 }, error : function(e){ console.log(e); } }); }, <!-- 保存按钮 --> save(){ let _self = this; console.log("_self.image",_self.image) let idcardreg = _self.idcardreg; // 正则身份证 let tell = _self.tell; //手机号验证 console.log(_self.idnum) if(_self.username == ‘‘){ uni.showToast({ title: ‘请填写姓名‘, duration: 2000, icon: ‘none‘ }); }else if(!tell.test(_self.userphone) && _self.userphone != ‘‘){ uni.showToast({ title: ‘请填写正确手机号‘, duration: 2000, icon: ‘none‘ }); }else if(!idcardreg.test(_self.idcardval)){ uni.showToast({ title: ‘请填写正确身份证‘, duration: 2000, icon: ‘none‘ }); }else if(_self.datepos == ‘‘){ uni.showToast({ title: ‘请选择入职时间‘, duration: 2000, icon: ‘none‘ }); }else if(_self.memberIntro == ‘‘){ uni.showToast({ title: ‘请填写员工简介‘, duration: 2000, icon: ‘none‘ }); } else if(_self.iconcheck == 0){ uni.request({ url:_self.httpUrl + ‘‘, // 后端api接口 method:‘POST‘, data: { }, header:{ ‘content-type‘:‘application/x-www-form-urlencoded‘ }, success:(res) => { console.log(res) if (res.statusCode == 200){ uni.showToast({ icon:‘success‘, title:"修改成功...", }) } setTimeout(() => { uni.navigateTo({ url:‘‘ }) }, 2000); },error(res1){ uni.showToast({ title:"添加失败...", }) } }); }else{ uni.uploadFile({ url:_self.httpUrl + ‘‘, // 后端api接口 filePath: _self.image, // uni.chooseImage函数调用后获取的本地文件路劲 name:‘EmployeeImage‘, //后端通过‘file‘获取上传的文件对象(字段) formData: { // openid:_self.openid, //剩下的字段 }, header:{"Content-Type": "multipart/form-data"}, success:(res) => { console.log(res) if (res.statusCode == 200){ uni.showToast({ icon:‘success‘, title:"修改成功...", }) } setTimeout(()=>{ uni.navigateTo({ url:‘‘ }) },2000) },error(res1){ uni.showToast({ title:"添加失败...", }) } }); } } } } <style> // 写在main.js的正则验证 Vue.prototype.idcardreg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;//身份证验证 Vue.prototype.tell = /^1[3456789]d{9}$/;//手机号验证 </style>
以上是关于uni-app 图片上传(uploadFile)的主要内容,如果未能解决你的问题,请参考以下文章