先看下效果

不(bù)多說(shuō)廢話，直接上(shàng)代碼

<view>
<button type="primary" bindtap="chooseImage">選擇圖片</button>
</view>


chooseImage(){
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success :(res) => {
    // tempFilePath可以(yǐ)作爲(wéi / wèi)img标簽的(de)src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
    this.setData({
      imageUrl:tempFilePaths[0]
    })
    //向後台發送
    wx.uploadFile({
      url: 'http://www.thexxdd.cn/baidu/', //僅爲(wéi / wèi)示例，非真實的(de)接口地(dì / de)址
      filePath: tempFilePaths[0],
      name: 'file',
      success : (res)=>{
        // const data = res.data
        console.log(res)
        //do something
      }
    })
  }
})

},

一般接口都是(shì)後台通過AI直接給你配置好，然後你調用即可

紫色的(de)動畫是(shì)爲(wéi / wèi)了(le／liǎo)有那麽一個(gè)正在(zài)掃描的(de)狀态，避免比如用戶太多，然後掃描很慢，加一個(gè)狀态，提高用戶體驗

<!-- 動畫 -->
<view class="animation">
<view class="animation-list">

</view>
</view>

.animation{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 500rpx;

}
.animation-list{
  width: 100%;
  height: 450rpx;
  background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));
  position: relative;
  top: -600rpx;
  animation: myfist 2s linear 1s infinite alternate;
}

/* 開始執行動畫 */
@keyframes myfist{
  0%{
    background: linear-gradient(to bottom,rgba(216,179,255,0),rgba(216,179,255,1));
    left: 0;
    top: -600rpx;
  }
  25%{
    left: 0;
    top: 50rpx;
  }
  50%{
    left: 0;
    top: 50rpx;
  }
  75%{
    left: 0;
    top: 50rpx;
  }
  100%{
    left: 0;
    top: -600rpx;
  }
}

給它一個(gè)判斷，當掃描完成就(jiù)隐藏即可