微信小程序上傳圖片 並和文字一起提交 （有接口）

實現功能如圖

 

 

 

html代碼

 
           
             <view class="main"> 
            
           
                 <view class="card"> 
            
           
                     <view class="card-up"> 
            
           
                         <view>身份證</view> 
            
           
                         <view>上傳身份證</view> 
            
           
                     </view> 
            
           
                     <image class="" src="{{photo}}" bindtap='chooseimg' mode="widthFix"></image> 
            
           
                 </view> 
            
           
                  
            
           
                 <view class="intro"> 
            
           
                     <view>填寫簡介</view> 
            
           
                     <textarea value="{{textVal}}" bindinput="handleTextInput" placeholder-style="color:#ccc;font-size:24rpx" name="" id="" cols="30" rows="10" placeholder="請仔細填寫簡介"></textarea> 
            
           
                 </view> 
            
           
             </view> 
            
           
 
           
             <view class="btn"> 
            
           
                 <button bindtap="gotoAudit">提交審核</button> 
            
           
             </view> 
            
          

js邏輯// pages/job/job.js

const app = getApp(); Page({ data: { photo:'../../static/shenfenzheng.png',//頁面上顯示的圖片 textVal:'',//文本 }, url:''//圖片上傳給后台完成后后台返回圖片路徑 //選擇照片 chooseimg(){ wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: (res) =>{ this.setData({ photo:res.tempFilePaths//傳進去的圖片數組放在data里面 }) //圖片上傳 wx.uploadFile({ url: 'api接口', method:'POST', filePath:this.data.photo[0],//圖片路徑需要字符串而不是數組 name:'file',//和后台約定的name header:{ 'content-type': 'application/x-www-form-urlencoded', "token":wx.getStorageSync('token') //token值 }, success:(res)=>{ if (res.statusCode!=200) { wx.showModal({ title: '提示', content: '上傳失敗', showCancel: false }) return; }else{ wx.showToast({ icon: "success", title: "上傳成功" }); this.url = JSON.parse(res.data).data.url//上傳成功后后台會返回一個圖片路徑把圖片路徑放到this里面 因為頁面沒用到所以不用放到this.data里面 } }, fail:(res)=> { console.log(res); } }) } }) }, // 文本域的輸入事件 handleTextInput(e){ this.setData({ textVal:e.detail.value }) }, //提交按鈕 gotoAudit(){ ///獲取文本內容圖片路徑 const {textVal}=this.data; // 驗證合法性 if(!textVal.trim()){ // 不合法 wx.showToast({ title: '輸入不合法', icon: 'none', mask: true, }); return; }

　　//這里封裝過request請求 let url = app.globalData.URL + 'api接口'; let data ={ card_front:this.url, //將上傳成功的圖片路徑返回給后台 intro:this.data.textVal //文本內容返回給后台 }
 app.wxRequest('POST', url, data, (res) => { console.log(res); if (res.code==1) { wx.showModal({ title: '提示', content: '提交成功，請耐心等待審核', showCancel: false, confirmText: '確定', confirmColor: '#ED8137', success: (result) => { if(result.confirm){ console.log("提交任務成功"); wx.switchTab({ url: '/pages/my/my' //提交成功后跳轉頁面 }) } }, }); }else{ wx.showToast({ title: res.msg, icon: 'none' }) } }, (err) => { console.log(err) }) }, })

css就不貼出來了可以自己寫