整體實現(xiàn)流程：首先調(diào)用uni.chooseImage方法，配置count、sizeType、sourceType參數(shù)，分別代表選擇的圖片個數(shù)、original 原圖，compressed 壓縮圖，默認(rèn)二者都有、是從相冊還是拍照。

然后在成功的回調(diào)中拿到上傳的所有圖片并存儲。然后就是添加水印，調(diào)用uni-getImageInfo拿圖片信息，然后使用canvas進(jìn)行水印添加。在成功的回調(diào)中進(jìn)行圖片上傳（uni-uploadFile）即回顯。代碼如下：

imgCount就是限制上傳個數(shù)，當(dāng)我們同時使用拍照和相冊上傳，會出現(xiàn)當(dāng)上傳一張拍照圖片，再從相冊上傳這個如果不做imgCount--操作上傳的個數(shù)會出現(xiàn)問題。也有其他實現(xiàn)形式哦。

如果我們在成功的回調(diào)中拿到所有圖片，直接在success中循環(huán)調(diào)用添加水印方法。例如選擇了兩張圖片就會出現(xiàn)上傳的兩張圖片一摸一樣。所以我沒有在success中直接遍歷。?

/**選擇圖片*/
  selectPicture() {
    uni.chooseImage({
      count: this.imgCount,
      sizeType: ['compressed'], // 壓縮圖片
      sourceType: ['camera', 'album'], // 拍照或相冊上傳圖片
      success: (res: any) => {
        this.imgCount-- // 這里主要為了限制選擇的圖片，解決圖片先拍照上傳，后有進(jìn)行相冊選擇
        // 每次清空數(shù)組
        this.photoArr.length = 0

        // 存儲上傳的圖片
        this.photoArr.push(...res.tempFiles.map((item: any) => item.path)) 
        // 添加水印
        this.callAddWaterMart()
      }
    })
  }

?這個callback方法就是為了在上傳并添加水印后在給第二張圖片添加。代碼中也有注釋，我就不多說了?

 // 調(diào)用添加水印的函數(shù)
  callAddWaterMart() {
    // 這個是真正的添加水印方法，傳入回調(diào)是為了解決同時上傳多張，會顯示相同的圖片。
    this.getInfoImage(() => {
      if (this.photoIndex < this.photoArr.length - 1) {
        this.photoIndex++
        this.callAddWaterMart()
      }
    })
  }

// 這里為了方便寫到一個函數(shù)里
getInfoImage(callback: any) {
    // 小程序沒有document，只能在頁面中建一個canvas，然后在成功時給他隱藏。
    this.flag = false
    // 這個函數(shù)是可以拿到圖片的一些信息，寬高等
    uni.getImageInfo({
       // 初始化photoIndex=0，拿到第一張圖片，并添加水印
      src: this.photoArr[this.photoIndex],
      success: res => {
        // // 設(shè)置畫布高度和寬度
        this.canvasWidth = `${res.width}px`
        this.canvasHeight = `${res.height}px`
        //獲取當(dāng)前時間
        let roleNameInfo = date(new Date(), 'long') + '\n' + this.from.data.address
        var ctx = uni.createCanvasContext('imgId')
        ctx.drawImage(this.photoArr[this.photoIndex], 0, 0, res.width, res.height)
        // 為圖片添加水印
        ctx.setFontSize(30) //水印字體大小
        ctx.setFillStyle('red') //水印顏色
        // 水印位置
        ctx.fillText(roleNameInfo, 60, res.height - 60)
        // 開始繪制添加水印的圖片并顯示在頁面中
        ctx.draw(false, result => {
          setTimeout(() => {
            //把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。在自定義組件下，第二個參數(shù)傳入自定義組件實例，以操作組件內(nèi) <canvas> 組件。
            // 這里主要為了拿到路徑
            uni.canvasToTempFilePath({
              canvasId: 'imgId',
              // 設(shè)置輸出的圖片的寬度高度，會加快輸出圖片時間
              destWidth: res.width,
              destHeight: res.height,
              fileType: 'jpg', //jpg為了壓縮
              quality: 0.8, //圖片的質(zhì)量
              success: res => {
                console.log('res', res)
                this.flag = true


                /** 添加上傳進(jìn)度和圖片路徑 */
                this.currentImgList.push({
                  path: res.tempFilePath,
                  uploadPercent: 0
                })
                // 上傳圖片
                this.uploadfile(res.tempFilePath)
                // 給所有的圖片添加水印
                callback()
              },
              fail: err => {
                uni.hideLoading()
                // this.$u.toast('上傳錯誤')
              }
            })
          }, 500)
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }

uploadFile我就不說了，每個公司都不一樣的路徑，看文檔就可以了。這里只提示思路，代碼大家自行實現(xiàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-519872.html

到了這里，關(guān)于uniapp實現(xiàn)上傳圖片添加日期和地點水印，修復(fù)多張圖片同時上傳，顯示相同圖片問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！