zoukankan      html  css  js  c++  java
  • 小程序上传图片

    wxml:

    <form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">
    <view class="tupian">
    <view class='loadpic' >
    <block wx:for="{{imgArr}}" wx:key="id">
    <image src="{{item}}" mode="widthFix" data-id="{{index}}" bindtap="deleteImv"/>
    </block>
    </view>
    <view class='loadpic' bindtap="chooseImage" >
    <image src="../../image/xj.png" mode="widthFix"></image>
    </view>
    <view class="zhu">请将学生证置于取景框内拍摄,确保照片清晰、不反光</view>
    <view class='dl'>
    <image src='../../image/d1.png' mode='widthFix' class='fl '></image>
    <input placeholder='请输入您的身份证号码' name="card" placeholder-class='ziti' class='fr'></input>
    </view>
    <input type="hidden" style="display:none" name="img" value="{{img}}"> </input>
    <button class='dlu' form-type='submit'>确认提交</button>
    </view>
    </form>

    js:

    chooseImage: function () {
    var that = this;

    let token= wx.getStorageSync('token');
    let wxapp_id= 10001;
    /* wx.showToast({
    title: '正在上传...',
    icon: 'loading',
    mask: true,
    duration: 10000
    });*/
    wx.chooseImage({
    count: 8,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
    if (res.tempFilePaths.count == 0) {
    return;
    }
    //上传图片
    var imgArrNow = that.data.imgArr;
    var upurl=App.api_root +'index/upload'
    imgArrNow = imgArrNow.concat(res.tempFilePaths);

    that.setData({
    imgArr: imgArrNow
    })
    for (var i = 0; i <imgArrNow.length;i++){
    wx.uploadFile({
    url: upurl,
    filePath: imgArrNow[i],
    name: 'file',
    formData: {token:token,wxapp_id:wxapp_id},
    header: {
    "content-type":'application/x-www-form-urlencoded'
    },
    success: function (res) {
    //console.log(JSON.parse(res.data).url);return false;
    var img = that.data.img;
    img = img.concat(JSON.parse(res.data).data);
    that.setData({
    img: img
    })
    },
    })
    }

    that.chooseViewShow();
    }
    })
    },

    deleteImv: function (e) {
    var imgArr = this.data.imgArr;
    var img = this.data.img;
    var itemIndex = e.currentTarget.dataset.id;
    imgArr.splice(itemIndex, 1);
    img.splice(itemIndex, 1);
    this.setData({
    imgArr: imgArr,
    img:img
    })
    //判断是否隐藏选择图片
    this.chooseViewShow();
    },
    chooseViewShow: function () {
    if (this.data.imgArr.length >= 9) {
    this.setData({
    chooseViewShow: false
    })
    } else {
    this.setData({
    chooseViewShow: true
    })
    }
    },

    如果 生命是场 寂寞的涡旋 不管 千回百转 方向不会偏
  • 相关阅读:
    Winform界面开发:如何在代码中获取自定义外观元素属性的值
    VCL组件DevExpress VCL发布v20.1.4,附高速下载
    WPF界面开发技巧分享——如何实现自定义DateEdit并自动更正值
    Web开发实用技能,看Kendo UI for jQuery组模板如何使用
    docker从C盘迁移到D盘
    ubuntu16.04中开启和关闭防火墙命令
    Linux安装与卸载 docker-compose
    在Docker容器bash中输入中文
    in()和exists()
    mysql遇见Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre的问题
  • 原文地址:https://www.cnblogs.com/dwq521/p/14669862.html
Copyright © 2011-2022 走看看