小程序上传图片

效果图

1 html

<view class="upPictrue">
    <view class="title">添加图片<text>（{{picture.length}}/5）</text></view>
    <view class="picture flex-sta">
          <view class="img" wx:for="{{picture}}" wx:key>
                <view class="close" bindtap="berthDelete" data-imgid="{{index}}"><image class="img-b" src="/images/icon/close.png"></image></view>
                <image class="img-b" src="{{item}}" bindtap="preImage" data-imgid="{{index}}"></image>
          </view>
          <view class="addPic" bindtap="addPicture">
                <image class="img-b" src="/images/icon/comment_01.png"></image>
          </view>
    </view>
</view>

2 wxcss

.upPictrue .title{color: #303133; font-size: 28rpx; padding: 0 20rpx;}
.upPictrue .title text{color: #cecece}
.picture{flex-wrap: wrap;background: #fff;padding: 30rpx 0 10rpx;}
.picture  .img{width: 150rpx;height: 150rpx;margin-left: 30rpx;margin-bottom: 24rpx;position: relative}
.picture  .img .close{width: 40rpx;height: 40rpx;position: absolute;top: -20rpx;right: -20rpx;}
.picture .addPic{width: 150rpx;height: 150rpx;margin-left: 30rpx;margin-bottom: 24rpx;}

3 js

data: {
   picture: []
},
//选择相册
addPicture: function () {
	var that = this;
	let members_id = wx.getStorageSync('members').id;  //用户id
	wx.chooseImage({
	  count: 9, // 最多可以选择的图片张数，默认9
	  sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
	  sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
	  success: function (res) {
	    var imgsrc = res.tempFilePaths;  //返回的图片数组
	    for (let i = 0; i < imgsrc.length;i++){
	      wx.uploadFile({
	        url: Config.restUrl + 'Members/updatePicture?member_id=' + members_id, //开发者服务器地址
	        filePath: imgsrc[i],  //要上传文件资源的路径
	        name: 'images',  //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
	        formData: {},
	        success: function (res) {
	          var picture = JSON.parse(res.data); //转化格式
	          let re_picture = picture.data
	          that.setData({
	            picture: re_picture
	          });
	        },
	        fail: function (res) {
	          console.log('失败了', res)
	        },
	      })
	    }
	  }
	})
},
// 图片删除
berthDelete: function (e) {
      // console.log(e.currentTarget.dataset.imgid); //图片的id
      let that = this;
      let imgid = e.currentTarget.dataset.imgid;
      let imgsrc = that.data.picture;   //图片的数组
      wx.showModal({
            title: '提示',
            content: '确定要删除这张图片吗',
            success(res) {
                  if (res.confirm) {
                        imgsrc.splice(imgid, 1);
                        that.setData({
                              picture: imgsrc,
                        })
                  } else if (res.cancel) {

                  }
            }
      })

},

 // 查看大图
 preImage(e) {
       let that = this;
       let img_id = Function.getDataSet(e, 'imgid')
       let picList = that.data.picture;
       wx.previewImage({
             current: picList[img_id], // 当前显示图片的http链接
             urls: picList // 需要预览的图片http链接列表
       })
 },