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>
