uni-app 图片上传（uploadFile）

尔心的藤逊新闻 發表於 2019-10-24 08:56:00

<h1>uni-app 图片上传在实际操作中的问题</h1>
<h3>  图片在不改变是如何触发接口和uni-app的uni.uploadFile方法里面的字段对应</h3>
<div class="cnblogs_code">
<pre><template>

<wiew>
 <view class="touxiangicon" @click="upload">
 <imageclass="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;
 console.log("tempFilePaths",tempFilePaths)//能够打印出选中的图片
 _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\d{9}$/;//手机号验证
</style></pre>
</div>
  
来源：https://www.cnblogs.com/wo1ow1ow1/p/11730220.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 图片上传（uploadFile）