微信小程序拍照上传后台，预览从点击的图片开始预览

微信小程序开发记录
图片上传新增删除功能预览功能，点击那张图预览那张

wxml

<view class="contant-pic">
 <view class="pics-list" wx:for="{{pics}}" wx:key="index">
 <!-- 预览 -->
 <image src="{{item}}" class="uploadImg" bindtap="previewImage" data-index="{{index}}" ></image>
 <!-- 点击删除照片-->
 <image src="../../../../images/pause.png" class="uploadImg-error" data-img="{{item}}" bindtap='deleteImg'></image>
 </view>
  <!-- 点击拍照-->
 <image src="../../../../images/mylogo.png" class="uploadImg {{isShow?'true':'hideTrue'}}" bindtap='chooseimg' ></image>
 </view>

wxss

```css
.contant-pic{
      width: 94%;
      margin: 0 auto;
      height:80px;
       
     }
     .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
     }

js我的图片信息不是本地的，是从拍照上传之后存在data里面

//选择照片
      chooseimg:function(){
        var that = this; 
        let pics = that.data.pics;
      wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        let tempFilePaths = res.tempFilePaths
        pics.push(tempFilePaths);
        that.setData({
          pics: pics
        })
        wx.uploadFile({
                url: 'https://www.btest.net.cn/console/api/up/image',
                filePath:tempFilePaths[0],
                name: 'file',
                header: {
                  "Authorization": "Bearer " + getApp().globalData.token
                     },
                success: function (res) {
                //格式化后台的json数据
               var cjson = JSON.parse(res.data);
               let data_index = [];
          for (const i in cjson.data.item){ 
            data_index.push(cjson.data.item[i].url)
          }
                  that.setData({
                  files:data_index,
                })
                 
                }, fail: function (res) {
                  console.log(res)
                }
              })
            }
      
      })
      },

      /**删除图片 */
      deleteImg:function(e){
        let that=this;
        let deleteImg=e.currentTarget.dataset.img;
        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
        })
        
        },


      //点击预览
      previewImage:function(e){
        var that = this,
        //获取当前图片下标
          index = e.currentTarget.dataset.index
          //数据源从data获取之后需要转化一下单独的存在一个数组里面
         var  pictures = that.data.pics;
          var dataArray = [];
          var datas = [];
          for (var i = 0; i < pictures.length;i++){
            for( var j=0;j<pictures[i].length;j++){
              dataArray[j] = pictures[i][j];
              datas.push(dataArray[j])
            }
          }
        wx.previewImage({
        //当前显示图片
         current:datas[index],
         //数据源所有图片在同一个数组内
         urls: datas  
        })
       },

大家看了觉得有什么问题，请留言我会看