先看下效果
不多说废话，直接上代码
<view><button type="primary" bindtap="chooseImage">选择图片</button></view>chooseImage(){wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success :(res) => { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths this.setData({ imageUrl:tempFilePaths[0] }) //向后台发送 wx.uploadFile({ url: 'http://www.thexxdd.cn/baidu/', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0], name: 'file', success : (res)=>{ // const data = res.data console.log(res) //do something } }) }})},
一般接口都是后台通过AI直接给你配置好，然后你调用即可
紫色的动画是为了有那么一个正在扫描的状态，避免比如用户太多，然后扫描很慢，加一个状态，提高用户体验
<!-- 动画 --><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; }}给它一个判断，当扫描完成就隐藏即可