先看下效果
不多说废话,直接上代码
<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;
}
}
给它一个判断,当扫描完成就隐藏即可