微信小程序开发图片上传

wxml:

 <!-- 资质信息 -->

  <view class="apply_info">

    <span>资质信息</span>

    <span>请上传经营者门头照、营业执照</span>

    <!-- 图片上传 -->

    <view class="upload">

      <view  wx:for="{{zizhiImg}}"  wx:key="index">

      <view class="upload_image_view" wx:if="{{item.img!=''}}">

 

        <image src="{{item.img}}" 

        data-srcs="{{item.img}}" 

        bindtap="chuantupian_Image" 

        mode="aspectFill">

        </image>

 

        <tui-icon catchtap="detele_chuantupian_Image" 

        data-index="{{index}}"

        name="close" size="{{26}}"

        unit="rpx">

        </tui-icon>

      </view>

      

      <view style="height:300rpx;height:220rpx"

       wx:else bindtap='chuantupian'

        data-index="{{index}}">

        <span>+添加</span>

        <span>{{item.msg}}</span>

      </view>

 

      </view>

    </view>

  </view>

css:

 

.apply_info>span:nth-child(1),.apply_userinfo>span:nth-child(1){

  font-size:32rpx;

  font-weight: bold;

  color: #1A1A1A;

  line-height: 66rpx;

  display: block;

  margin-left: 27rpx;

  margin-top: 50rpx;

}

.apply_info>span:nth-child(2),.apply_userinfo>span:nth-child(2){

  font-size:28rpx;

  font-weight: bold;

  color: #1d181880;

  line-height: 30rpx;

  display: block;

  margin-left: 27rpx;

 

}

.upload{

display: flex;

flex-direction: rcolumn ;

justify-content: space-around;

 

}

.upload>view{

width: 300rpx;

height: 220rpx;

background-color: #e2dfdffa;

margin-top:30rpx;

border-radius: 10rpx;

}

.upload>view:nth-child(1) span:nth-child(1){

display: block;

font-size:32rpx;

color:#F74262;

padding-top: 25%;

text-align: center;

}

.upload>view:nth-child(1) span:nth-child(2){

  display: block;

  font-size:28rpx;

  color:rgba(102, 100, 100, 0.6);

  text-align: center;

  }

.upload>view:nth-child(2) span:nth-child(1){

    display: block;

    font-size:32rpx;

    color:#F74262;

    padding-top: 25%;

    text-align: center;

    }

.upload>view:nth-child(2) span:nth-child(2){

      display: block;

      font-size:28rpx;

      color:rgba(102, 100, 100, 0.6);

      text-align: center;

      }

 

js:

var app = getApp()

const url = app.globalData.url

const myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/

Page({

 

 

 

  // 资质选择图片上传

  chuantupian: function (e) {

    var _this = this;

    let {index}=e.currentTarget.dataset

    wx.chooseImage({

      count: 1, // 默认9  

      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  

      success: function (res) {

        console.log(res)

        const isLtSize = res.tempFiles[0].size / 1024 / 1024 < 7;

        if (!isLtSize) {

          wx.showToast({

            title: '图片大小不能大于7M',

            icon:'none'

          })

          return false;

        }else{

        wx.showLoading({

          title: '上传中...',

        })

        var tempFilePath = res.tempFilePaths[0]

        wx.uploadFile({

          url: url + 'api/images/upload',

          filePath: tempFilePath,

          name: 'image',

          filetype: 'image',

          header: {

            "Content-Type": "application/x-www-form-urlencoded",

          },

          formData: {

            name: 'user'

          },

          success: function (res) {

            wx.hideLoading()

            let re = JSON.parse(res.data)

            if(re.meta.code==0){

              wx.showToast({

                title: '上传成功',

              })

                let img='zizhiImg['+ index + '].img';

                _this.setData({

                [img]:re.data.pic,

                })

            }else{

              wx.showToast({

                title: re.meta.message,

                icon:'none'

              })

            }

          },

          fail: function (err) {

            wx.hideLoading()

            // reject(new Error('err'));

          }

        })

        }

 

 

      }

    })

  } ,

  // 点击当前资质图片预览(单个)

  chuantupian_Image: function(e) { 

    let {srcs} = e.currentTarget.dataset;

    wx.previewImage({

      current: srcs,

      urls: [srcs]

    })

  },

 

  // 删除当前资质图片

  detele_chuantupian_Image:function(e){

    let that=this;

    let {index} = e.currentTarget.dataset;

    let img='zizhiImg['+ index + '].img';

    wx.showModal({

      title: '图片删除',

      content: '确定要删除当前图片吗？删除后需要重新上传是否确定？',

      success (res) {

        if (res.confirm) {

          console.log('用户点击确定')

          that.setData({

            [img]:''

          })

        } else if (res.cancel) {

          console.log('用户点击取消')

        }

      }

    })

   

  },

如图：

 

 

 

 

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

 

  }

})