先看下效果

不多說(shuō)廢話，直接上代碼

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


chooseImage(){
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success :(res) => {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
    this.setData({
      imageUrl:tempFilePaths[0]
    })
    //向后臺(tái)發(fā)送
    wx.uploadFile({
      url: 'http://www.thexxdd.cn/baidu/', //僅為示例，非真實(shí)的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      success : (res)=>{
        // const data = res.data
        console.log(res)
        //do something
      }
    })
  }
})

},

一般接口都是后臺(tái)通過(guò)AI直接給你配置好，然后你調(diào)用即可

紫色的動(dòng)畫(huà)是為了有那么一個(gè)正在掃描的狀態(tài)，避免比如用戶太多，然后掃描很慢，加一個(gè)狀態(tài)，提高用戶體驗(yàn)

<!-- 動(dòng)畫(huà) -->
<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;
}

/* 開(kāi)始執(zhí)行動(dòng)畫(huà) */
@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è)判斷，當(dāng)掃描完成就隱藏即可