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

实现功能如图

html代码

<view>上传身份证</view>

</view>

</view>

</view>

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

秒客网

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

相关文章

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

相关文章

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