小程序端上传图片

效果展示

image.png
image.png
image.png

html

<view class='chuantu'>
  <view class='tianjia_img_z'>
    <view class='tianjia_img tianjia_img2' wx:for="{{chooseImgs}}" wx:for-index='idx' data-del_key="{{idx}}">
      <image src='{{item}}' bindtap='deleteImg' mode='aspectFill' data-del_key="{{idx}}"></image>
      <!-- <image class='deleteImg'  src='{{serverImg}}/image/img_tubiao/fabu_tianjia.png' data-del_key="{{idx}}"></image> -->
    </view>
    <view class='clear'></view>
  </view>
  <view class='tianjia_img' bindtap='chooseImg'>
    <image src='/image/img_tubiao/fabu_tianjia.png'></image>
  </view>
  <textarea class='word' value='{{content}}'  bindinput='content' placeholder='记录这一刻的想法...'  focus="{{focus}}"></textarea>
  <view class='clear'></view>
</view>
<!-- 发布 -->
<view class='ok_fabu_box_bg'></view>
<view class='ok_fabu_box'>
    <view class='ok_fabu' bindtap='goFound' >发布</view>
</view>

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    chooseImgs: [],
    //判断点击事件
    falg: true,
    //内容
    content: '',
    focus: false, 
    //图片
    base64Files: [],
    serverImg: app.globalData.serverImg,
  },
  //  发布
  goFound: function() {
    var that = this;
    if (that.data.falg) {
      that.setData({
        falg: false
      })
      that.saveCircleFriends();
    }
  },
  //content   获取内容
  content: function(e) {
    var that = this
    that.setData({
      content: e.detail.value,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
  },

  // 选择上传图片
  chooseImg: function() {
    var that = this;
    var imgs_num = that.data.chooseImgs.length;
    if (that.data.chooseImgs.length >= 6) {
      console.log('图片已经6张了');
      wx.showModal({
        title: '提示',
        content: '最多上传6张图片',
        success: function(res) {}
      })
      return false;
    }

    wx.chooseImage({
      count: 6 - imgs_num, // 默认6
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        console.log(res);
        that.setData({
          chooseImgs: that.data.chooseImgs.concat(res.tempFilePaths),
        })
        var tempFilePaths = res.tempFilePaths;
        var base64 = new Array();
        var test = false;
        var base64file = '';

        for (var k = 0; k < tempFilePaths.length; k++) {
          wx.getFileSystemManager().readFile({
            filePath: res.tempFilePaths[k], //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调          
              that.data.base64Files.push('data:image/png;base64,' + res.data);
            }
          })
        }
        console.log(that.data.base64Files)
      }
    })
  },


  deleteImg: function(e) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '是否删除',
      success: function(res) {
        if (!res.cancel) {
          var del_key = e.currentTarget.dataset.del_key;
          // console.log('删除key' + del_key);
          // console.log(that.data.base64Files)
          that.data.base64Files.splice(del_key, 1);
          that.data.chooseImgs.splice(del_key, 1);
          that.setData({
            chooseImgs: that.data.chooseImgs,
          })
          // console.log(that.data.base64Files)
        }
      }
    })
  },

  //发布
  saveCircleFriends: function() {
    var that = this;
    if (!that.data.content && !that.data.base64Files.length) {
      wx.showModal({
        title: '提示',
        content: '请填写您要发布的内容！',
        success: function(res) {}
      })
      that.setData({
        falg: true
      })
      return;
    }
    var data = {
      title: '',
      content: that.data.content,
      image: JSON.stringify(that.data.base64Files),
      longitude: '112.897935',
      latitude: '28.220488',
      city: '长沙',
      conversation_id: that.data.conversation_id,
      conversation_title: that.data.conversation_title,
    };
    var saveCircleFriendsUrl = app.globalData.shopServerUrl + '/circlefriends/save';
    utils.imagesHttps(saveCircleFriendsUrl, data, that.saveCircleFriendsValue)
  },
  saveCircleFriendsValue: function(data) {
    var that = this;
    wx.showToast({
      title: data,
      icon: 'success',
      mask: true,
      duration: 1500
    })
    that.setData({
      falg: true
    })
    setTimeout(function() {
      wx.switchTab({
        url: '../found/found',
      })
    }, 1300)

  },
})

css

.chuantu {
  width: 92%;
  padding: 0 4%;
  min-height: 290rpx;
  margin: 50rpx 0 0;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.chuantu .tis {
  font-size: 24rpx;
  color: #999;
}

.chuantu .chuantu_img {
  width: 158rpx;
  height: 158rpx;
  margin-top: 180rpx;
}

.chuantu .chuantu_img image {
  width: 100%;
  height: 100%;
}

.tianjia_img {
  width: 100%;
  margin: auto;
}

.tianjia_img image {
  width: 214rpx;
  height: 214rpx;
  border-radius: 10px;
}

.tianjia_img_z {
  width: 100%;
}

.tianjia_img2 {
  float: left;
  width: 214rpx;
  margin-right: 14rpx;
}

.tianjia_img2 image {
  border-radius: 10px;
}

.deleteImg {
  width: 44rpx !important;
  height: 44rpx !important;
  border-radius: 50% !important;
  position: relative;
  top: -228rpx;
  left: 173rpx;
}

.clear {
  clear: both;
}


.ok_fabu_box_bg{
  width:100%;
  height: 88rpx;
  background-color: #f4f4f4;
}
.ok_fabu_box {
  width:100%;
  height: 150rpx;
  position: fixed;
  bottom: 0rpx;
  z-index:99;
  background-color: #f4f4f4;
}
.ok_fabu{
  width: 300rpx;
  height: 90rpx;
  background-color: #003F2E;
  border-radius: 44px;
  margin: auto ;
  text-align: center;
  line-height: 90rpx;
  color: white;
  font-size:48rpx;
  z-index:99999999;

}

.ok_fabu_box cover-view{
  z-index: 99999;
  width: 100%;
  height: 100%;
  
}