小程序上传图片、预览图片、长按删除图片

在小程序开发中经常会做到关于图片的一些功能，下面是官方示例组件中的，但是官方没有删除图片功能，我添加了一下，希望能帮助到你。




你们要是用这个示例的话得导入官方的示例框架。基础控件库

代码：

<view class="photo_box">
     <view class="weui-uploader__bd">                  
     <view class="weui-uploader__files" id="uploaderFiles">
          <block wx:for="{{files}}" wx:key="*this">
               <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage"id="{{item}}">
                     <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                </view>
          </block>
      </view>
       <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" bindtap="chooseImage"></view>
             </view>
        </view>
</view>

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
   /*照片文件
   */
    files: [],
  },
  /*
  *选择照片
  */
  chooseImage:function(e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        });
      }
    })
  },
  /**预览照片 */
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files // 需要预览的图片http链接列表
    })
  },
  /**删除照片 */
  deleteImage: function (e) {
    var that = this;
    var images = that.data.files;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    wx.showModal({
      title: '系统提醒',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          images.splice(index, 1);
        } else if (res.cancel) {
          return false;
        }
        that.setData({
          files: images
        });
      }
    })
  },
})

css的很少，大部分都是组件库里面的。

/*照片区域*/
.photo_box{
  margin: 20rpx;
  background-color: white;
}

希望这篇文章可以帮助到你。