小編給大家分享一下小程序?qū)崿F(xiàn)多圖上傳、圖片預(yù)覽效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

湘鄉(xiāng)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

wxml代碼：

    
    
      
        點(diǎn)擊可預(yù)覽選好的圖片
        {{pics.length}}/9
      
      
        
          
            
              
            
          
        
        
        
          
        
      
    
  

wxss代碼：

page {
  line-height: 1.6;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
  vertical-align: middle;
}
.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.weui-cell_input {
  padding-top: 0;
  padding-bottom: 0;
}
.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  align-items: center;
}
.weui-uploader__title {
  flex: 1;
}
.weui-uploader__info {
  color: #b2b2b2;
}
.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.weui-uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
}
.weui-uploader__img {
  display: block;
  width: 79px;
  height: 79px;
}
.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}
.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hideTrue {
  display: none
}

js代碼：

var app = getApp();
Page({
  data: {
    pics: [],
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    isShow: true
  },
  onLoad: function (options) {
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
    isShow: (options.isShow == "true" ? true : false)
  },
  // 圖片上傳
  chooseImage: function () {
    var _this = this,
      pics = this.data.pics;
    wx.chooseImage({
      count: 9 - pics.length, // 最多可以選擇的圖片張數(shù)，默認(rèn)9
      sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // success
        var imgSrc = res.tempFilePaths;   //圖片路徑
        pics = pics.concat(imgSrc);   //選取的圖片的地址數(shù)組
        // 控制觸發(fā)添加圖片的最多時(shí)隱藏
        if (pics.length >= 9) {
          _this.setData({
            isShow: (!_this.data.isShow)
          })
        } else {
          _this.setData({
            isShow: (_this.data.isShow)
          })
        }
        _this.setData({
          pics: pics
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  // 圖片預(yù)覽
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.pics
    })
  }


 // 刪除圖片
 deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
 },
uploadimg:function(){//這里觸發(fā)圖片上傳的方法
       var pics=this.data.pics;
       app.uploadimg({
           url:'https://........',//這里是你圖片上傳的接口
           path:pics//這里是選取的圖片的地址數(shù)組
        });
  },
})

在app.js中寫(xiě)一個(gè)多張圖片上傳的方法,后面引入，你也可以寫(xiě)在一個(gè)JS文件中，后面引入：

//多張圖片上傳
    function uploadimg(data){
     var that=this,
         i=data.i?data.i:0,//當(dāng)前上傳的哪張圖片
         success=data.success?data.success:0,//上傳成功的個(gè)數(shù)
         fail=data.fail?data.fail:0;//上傳失敗的個(gè)數(shù)
      wx.uploadFile({
            url: data.url, 
            filePath: data.path[i],
            name: 'file',//這里根據(jù)自己的實(shí)際情況改
            formData:null,//這里是上傳圖片時(shí)一起上傳的數(shù)據(jù)
            success: (resp) => {
               success++;//圖片上傳成功，圖片上傳成功的變量+1
               console.log(resp)
                console.log(i);
                //這里可能有BUG，失敗也會(huì)執(zhí)行這里,所以這里應(yīng)該是后臺(tái)返回過(guò)來(lái)的狀態(tài)碼為成功時(shí)，這里的success才+1
            },
            fail: (res) => {
                fail++;//圖片上傳失敗，圖片上傳失敗的變量+1
                console.log('fail:'+i+"fail:"+fail);
            },
            complete: () => {
                console.log(i);
                i++;//這個(gè)圖片執(zhí)行完上傳后，開(kāi)始上傳下一張
            if(i==data.path.length){   //當(dāng)圖片傳完時(shí)，停止調(diào)用          
                console.log('執(zhí)行完畢');
                console.log('成功：'+success+" 失?。?+fail);
            }else{//若圖片還沒(méi)有傳完，則繼續(xù)調(diào)用函數(shù)
                console.log(i);
                data.i=i;
                data.success=success;
                data.fail=fail;
                that.uploadimg(data);
            }
                
            }
        });
    }

效果圖，可點(diǎn)擊放大預(yù)覽：

以上是“小程序?qū)崿F(xiàn)多圖上傳、圖片預(yù)覽效果的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！