zoukankan      html  css  js  c++  java
  • 微信小程序上传图片 并和文字一起提交 (有接口)

    实现功能如图
     
    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就不贴出来了可以自己写

  • 相关阅读:
    Firemonkey 控件设定字型属性及颜色
    ListView 使用 LiveBindings 显示超过 200 条记录
    Firemonkey ListView 获取项目右方「>」(Accessory) 事件
    XE7 Update 1 选 iOS 8.1 SDK 发布 iPhone 3GS 实机测试
    Firemonkey Bitmap 设定像素颜色 Pixel
    Firemonkey 移动平台 Form 显示使用 ShowModal 范例
    XE7 提交 App(iOS 8)提示「does not contain the correct beta entitlement」问题修复
    XE7 Android 中使用 MessageDlg 范例
    导出 XE6 预设 Android Style (*.style) 档案
    修正 Memo 設定為 ReadOnly 後, 無法有複製的功能
  • 原文地址:https://www.cnblogs.com/aomeng/p/13560871.html
Copyright © 2011-2022 走看看