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

实现功能如图

 

 

 

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