微信小程序——关于图片

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

wxml

<!--选择照片-->
<view class="name">
  <view class="left">上传照片</view>
  <view class="right">{{listNum}}/2</view>
</view>
<view class="aaa">
  <view class="picture" style="width:{{sWidth}}px;height:{{sHeight}}px;" bindtap="selectBefore" wx:if="{{addImageShow}}">
    <view class="jia"> + </view>
  </view>
  <view class="picture" style="width:{{sWidth}}px;height:{{sHeight}}px;" wx:for="{{list}}" wx:key="key">
    <image style="width:{{sWidth}}px;height:{{sHeight}}px;" src="{{item}}" bindtap="previewImage" bindlongpress="delImage" data-src="{{item}}" data-index="{{index}}"></image>
  </view>
</view>

wxss

.picture {
  margin-left: 1%;
  margin-top: 2px;
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
  display: flex;
}
.jia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.picture image {
  width: 100px;
  height: 100px;
  display: flex;
}

js

///选择图片

picture:function(num,name) {
    var that = this ;
    wx.chooseImage({
      count: num ,
      success:function(res) {
        console.log(res);
        console.log(res.tempFilePaths , name + '图片地址')
         for (let i = 0; i < res.tempFilePaths.length; i++) {
            var string = 'list[' + that.data.list.length + ']' ;
            that.setData({
              [string]: res.tempFilePaths[i] ,
            })
          }
      }
    })
  },

///删除图片
  delImage:function(e) {
    var that = this ;
    console.log(e.currentTarget.dataset.index)
    console.log(e.currentTarget.dataset.src)
    var string = e.currentTarget.dataset.src ;
    var delList = that.data.list ;
    wx.showModal({
      cancelColor: '#000', ///取消颜色
      confirmColor: '#0c6' , ///确认颜色
      title: '删除图片' ,
      content: '确认要删除此图片吗？' ,
      success:function(res) {
        console.log(res) ;
        if(res.confirm) {
           console.log( '用户点击确定' )
           delList.splice(e.currentTarget.dataset.index,1) ;
           that.setData({
             list: delList ,
             addImageShow:true ,
           })
        } else {
          console.log( '用户点击取消' )
        }
      }
    })
    console.log(that.data.list)
  },
  ///图片放大预览
  previewImage: function (e) {  
    var that = this ;
    var current=e.target.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接
      urls: that.data.list // 需要预览的图片http链接列表
    })
  },
  ///上传图片
  uploadFile:function(fileSrc ,type ) {
    var that = this ;
    wx.uploadFile({
      filePath: fileSrc ,
      name: 'file',
      url: app.globalData.url + '/upload/lock/',
      header:{
        'content-type': 'text/html' ,
      },
      formData: {
        deviceID: that.data.deviceID ,
        userShenfen: that.data.userShenfen ,
        phone: that.data.pho ,
        type: type ,
      },
      success:function(res) {
        console.log(res , '上传结果')
        var string = JSON.parse(res.data)
        console.log(string)
        console.log(string.code)
      },
      fail:function(res) {
        console.log(res,'上传出错' , fileSrc , type )
        ///上传出错，重试
        that.uploadFile(fileSrc ,type ) ;
      }
    })
  },