微信小程序上传图片 并和文字一起提交 （有接口）

实现功能如图

 

 

 

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就不贴出来了可以自己写