微信小程序實現上傳多張本地圖片到服務器和圖片預覽

目錄

• 1，前言
• 2，需求
• 3，解決思路
• 4，代碼展現

1，前言

---

最近在寫小程序，用到了wx.uploadFile方法，發現這方法竟然不支持同時上傳多個文件，因而本身寫了一個上傳多個的方法。

2，需求

---

博主作的是用戶投訴頁面；需求是用戶上傳最多三張圖片，最後把圖片和文字和用戶信息等一塊兒提交給服務器；

3，解決思路

---

博主的解決思路是定義一個遞歸函數，遞歸調用wx.uploadFile上傳，所有完成後結束遞歸。

4，代碼展現

---

this.data裏的數據

/**
* 頁面的初始數據
*/
data: {
 imgs:[],//上傳圖片列表
 imgPath:[],//已上傳成功的圖片路徑
},

上傳圖片代碼

// 上傳照片
chooseImg (e) {
  const _this = this;
  let imgs = this.data.imgs;
  let imgNumber = this.data.imgs.length;//當前已上傳的圖片張數
  if(imgNumber >= 3){
    FN.Toast("超出上傳個數");
    return false;
  }else{
    imgNumber = 3 - imgNumber;
  };
  wx.chooseImage({//打開本地相冊選擇圖片
    count: imgNumber,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
      const tempFilePaths = res.tempFilePaths;
      for(let i = 0;i < tempFilePaths.length; i++){
        imgs.push(tempFilePaths[i]);
      }
      _this.setData({//賦值，回顯照片
        imgs: imgs
      });
      let successUp = 0; //成功
      let failUp = 0; //失敗
      let count = 0; //第幾張
      let length = tempFilePaths.length; //總數
      _this.recursionUploading(tempFilePaths, successUp, failUp, count, length);//調用上傳方法
    }
  })
},

遞歸上傳方法

//採用遞歸的方式上傳圖片
recursionUploading(imgPaths, successUp, failUp, count, length){
  var _this = this;
  wx.showLoading({
  title: '正在上傳第' + count + '張',
  });
  wx.uploadFile({
    url: `${app.globalData.baseURL}/api接口地址`,
    filePath: imgPaths[count],
    formData:{
      userId:app.globalData.userMsg.userId
    },
    name: "uploadImage",
    header: {
      'content-type': 'multipart/form-data'
    }, 
    success (e) {
      console.log(e)
      let path = _this.data.imgPath;
      let obj = e.data;
      if(obj.status === "y"){
        path.push(obj.infoObject);
        _this.setData({
          imgPath:path
        });
      }
      successUp++;//成功+1
    },
    fail (e) {
      failUp++;//失敗+1
    },
    complete (e) {
      count++;//下一張
      if(count == length){
      	FN.Toast(`上傳成功${successUp}`)
      }else{
        //遞歸調用，上傳下一張
        _this.recursionUploading(imgPaths, successUp, failUp, count, length);
      }
    }
  })
},

預覽大圖

// 預覽大圖
lookBigImg (e) {
  let index = e.currentTarget.dataset.index;//索引
  let big = this.data.imgs[index];
  wx.previewImage({
    current: big, // 當前顯示圖片的http連接
    urls: this.data.imgs // 須要預覽的圖片http連接列表
  })
},

若是看了以爲有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END

往期文章

• 微信小程序API交互的自定義封裝
• 簡單的JS+CSS實現網頁自定義換膚

我的主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金