微信小程式實現上傳圖片

//wxml <button class='button' bingtap="uploadSomeMsg">上傳</button>    
          <view class="uploadImgBox">
            <view class='smallImgBox'>
              <block wx:for="{{img_arr}}" wx:key="index">
                <view class='logoinfo'>
                  <image class='logoinfo' mode="aspectFill" src='{{item}}' data-index="{{index}}" bindtap="previewImg"
                    bindlongpress="deleteImg" name="headimage" ></image>
                </view>
              </block>
              <image bindtap='getLocalityImg' class='moreImg' src="../../images/uploadPictures.png">
              </image>
            </view>
            <view>
          </view> 
</view>

//wxss
.uploadImgBox {
  margin: 30rpx 0;
}

.logoinfo {
  height: 180rpx;
  width: 180rpx;
  margin: 10rpx ;
}

.smallImgBox {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,180rpx);
  grid-gap:20rpx 10rpx;
}

.moreImg {
  border-radius: 10rpx;
  height: 180rpx;
  width: 180rpx;
  margin: 20rpx ;
}.button{  
 height: 90rpx;  
 width: 270rpx;  
 font-size: 38rpx;  
 background-color: rgba(146, 163, 45, 0.288);  
 font-weight: 600;  
 color: white;
 } 
 button::after {
  border: none;
} 

//js
Page({
  data: {
    img_arr: [], //儲存照片的陣列
  },

//https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html  微信小程式上傳檔案api
  //上傳圖片到伺服器 
  uploadSomeMsg() {
    var that = this
    var adds = that.data.img_arr;
    for (let i = 0; i < this.data.img_arr.length; i += 1) {
      wx.uploadFile({
        url:'https://example.weixin.qq.com/upload', //僅為範例，非真實的介面地址
        filePath: that.data.img_arr[i],
        name: 'content',
        formData: {
          'user': adds
        },
        success: function (res) {
          console.log(res, "上傳圖片啦")
          if (res) {
            wx.showToast({
              title: '已提交發布！',
              duration: 3000
            });
          }
        }
      })
    }
  },

  //從本地獲取照片 
  getLocalityImg() {
    let that = this;
    if (this.data.img_arr.length < 5) {
      wx.chooseImage({
        count: 5 - that.data.img_arr.length, //上傳圖片的數量 當之前上傳了部分圖片時 ,總數 - 已上傳數 = 剩餘數   (限制上傳的數量)
        sizeType: ['original', 'compressed'],  //可以指定原圖或壓縮圖,預設二者都有
        sourceType: ['album', 'camera'],        //指定圖片來源是相機還是相簿,預設二者都有
     success(res) {
          console.log(res, "---------上傳的圖片")

          const tempFiles = res.tempFiles //包含圖片大小的陣列

          let answer = tempFiles.every(item => {   //限制上傳圖片大小為2M,所有圖片少於2M才能上傳
            return item.size <= 2000000
          })
    
          if (answer) {
            that.setData({
              img_arr: that.data.img_arr.concat(res.tempFilePaths),
            })
          }else{
                  wx.showToast({
                title:'上傳圖片不能大於2M!',
                icon:'none'    
            })
          }

        }
      })

    } else {
      wx.showToast({  //超過圖片張數限制提示
        title: '最多上傳五張圖片',
        icon: 'none',
        duration: 2000
      })

    }
  },

  //刪除照片功能與預覽照片功能 
  deleteImg(e) {
    let that = this;
    let img_arr = that.data.img_arr;
    let index = e.currentTarget.dataset.index;  //獲取長按刪除圖片的index
    wx.showModal({
      title: '提示',
      content: '確定要刪除此圖片嗎？',
      success(res) {
        if (res.confirm) {
          // console.log('點選確定了');
          img_arr.splice(index, 1);
        } else if (res.cancel) {
          // console.log('點選取消了');
          return false;
        }
        that.setData({
          img_arr: img_arr
        });
      }
    })
  },

  //預覽圖片
  previewImg(e) {
    let index = e.currentTarget.dataset.index;
    let img_arr = this.data.img_arr;
    wx.previewImage({
      current: img_arr[index],
      urls: img_arr
    })
  },


})

//1__轉換本地上傳圖片

//如果需要上傳base64格式圖片到後端,可以在上傳圖片時可以這樣轉換,其它的和普通介面上傳資料一樣
          //轉換結果
        let data=wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64") 
//`data:image/png;base64,${data}`
//上傳時只需要在轉換結果前加一個: `data:image/png;base64,${data}`   ,就是完整的圖片資料啦

  //2__轉換伺服器網路圖片為base64
    images.forEach(url => {
          let newUrl = `https://dx.showweb.net/upload${url}` //需拼上字首才能下載網路圖片

        this.imageToBase(newUrl).then((res)=>{
          this.data.img_arr.push(res)
          this.setData({
            img_arr:this.data.img_arr
          })
          })

        })


  imageToBase(img) {
   return new Promise((resolve, reject)=>{
      wx.downloadFile({ //先下載圖片
        url: img,
        success(res) {
          if (res.statusCode === 200) {
            wx.playVoice({
              filePath: res.tempFilePath //選擇圖片返回的相對路徑
            })
            resolve(res.tempFilePath)
          }
        }
      })
    })
  },