微信小程序图片上传

首先，先放上效果图

                

接下来放上代码，首先wxml页面

<view class="wrap">
  <view class="phone">
    <input name="inputName" bindinput="inputName" placeholder="请输入商品名称" />
  </view>
  <view class="contant-wrap">
    <view class="content">
      <textarea name="bindTextAreaBlur" bindblur="bindTextAreaBlur" auto-height placeholder="请输入商品描述" maxlength="600" />
    </view>
    <text class="img-pic">请添加商品图片</text>   
    <view class="contant-pic">           
      <view class="pics-list" wx:for="{{pics}}">
      <image src="{{item}}" class="uploadImg"></image>
        <image src="../../img/tbl2.jpg" class="uploadImg-error" data-img="{{item}}" bindtap="deleteImg"></image>
      </view>
      <image src="../../img/tbl1.jpg" class="uploadImg {{isShow ? 'true' : 'hideTrue'}}" bindtap="uploadImage"></image>
    </view>
  </view>
  <view class="bottom" bindtap="submitAdvice">提交</view>
</view>

 其次是wxss页面

page{
  background-color: #efefef;
}
.wrap{
  width:90%;
  margin-left:5%;
  margin-top:10px;
  font-size:15px;
}
.contant_wrap{
  background-color: #fff;
}
.content{
  width: 100%;
  margin-top: 30rpx;
}
textarea{
  min-height:300rpx;
  max-height: 300rpx;
  padding: 10rpx 0;
  width: 100%;
   
}
.contant-pic{
  width: 94%;
  margin: 0 auto;
  height:80px;
  margin-top:50rpx;
}
.pics-list{
  width:73px;
  height:73px;
  float:left;
  margin-right:6px;
 
}
.uploadImg{
  width:70px;
  height:70px;
}
.uploadImg-error{
  height:25px;
  width:25px;
  position:relative;
  top:-80px;
  left:55px;
}
.hideTrue {
  display: none
}
.true {
  display: block
}
input{
  margin-top: 30rpx;
  height: 80rpx;
  padding-left: 20rpx;
  background-color: #fff;
}
.placeholder{
  color: #999999;
  font-size: 12pt;
}
.bottom{
  width:100%;
  height:40px;
  background-color:#e64340;
  position:fixed; bottom:0;
  color:#ffff;
  text-align: center;
  line-height: 40px;
}
.img-pic{
  color: #999999;
}

最后放上js页面

Page({
  /**
   * 页面的初始数据
   */
  data: {
    content: '',
    name: '',
    pics: [],
    isShow: true
  },

  /**
   * 获取商品名称
   */
  inputName: function (e) {
    this.setData({
      name: e.detail.value
    })
  },

  /**
   * 获取商品描述
   */
  bindTextAreaBlur: function(e){
    this.setData({
      content: e.detail.value
    })
  },

  /**
   * 上传商品图片
   */
  uploadImage: function(e){
    let that = this;
    let pics = that.data.pics;
    wx.chooseImage({
      count: 3 - pics.length,
      sizeType: ['original','compressed'],
      courceType: ['album','camera'],
      success: function(res){
        let imgSrc = res.tempFilePaths;
        pics.push(imgSrc);
        if(pics.length >= 3){
          that.setData({
            isShow: false
          })
        }
        that.setData({
          pics: pics
        })
      },
    })
  },

  /**
   * 删除商品图片
   */
  deleteImg: function(e){
    let that = this;
    let deleteImg = e.currentTarget.dataset.img;
    console.log(deleteImg);
    let pics = that.data.pics;
    let newPics = [];
    for (let i = 0; i < pics.length; i++){
      if(pics[i]['0'] != deleteImg['0']){
        newPics.push(pics[i])
      }
    }
    that.setData({
      pics: newPics, 
      isShow: true
    })
  },

  /**
   * 提交信息
   */
  submitAdvice: function(){
    let that = this;
    let content = that.data.content;
    let name = that.data.name;    
    let pics = that.data.pics;
    console.log(content);
    console.log(name);
    console.log(pics);
  },