步骤
获取图片的信息（上一步选择的图片）调用文件上传微信API把图片上传到AI接口AI接口会在后台检测颜值信息，然后返回小程序接收到结果之后显示到页面wx.uploadFile()
url 图片上传地址filePath 本地图片的路径name 提供给服务器的图片的获取名称 success 上传成功的回调函数 result.data.face[0] 表示服务器返回数据 // 实现图片上传检测颜值功能 checkImage: function (path) { // 把选中的图片上传给AI接口进行颜值检测 wx.uploadFile({ // 上传的地址 url: 'https://ai.qq.com/cgi-bin/appdemo_detectface', // 本地选中的图片路径 filePath: path, // 用于服务器接收上传的图片 name: 'image_file', success: (res) => { let obj = JSON.parse(res.data) this.setData({ result: obj.data.face[0] }) } }) } success: (res) => { let obj = JSON.parse(res.data) if (obj.data.face.length === 0) { // 选中的图片不合理，请换一张再试 wx.showToast({ title: '选中的图片不合理，请换一张再试' }) return } this.setData({ result: obj.data.face[0] }) } <!-- 检测结果 --> <view class="ret" wx:if='{{result}}'> <view>性别：{{result && result.gender>50?'男': '女'}}</view> <view>是否戴眼镜：{{result && result.glass }}</view> <view>颜值：{{result && result.beauty}}</view> <view>年龄：{{result && result.age}}</view> </view>文件结构
案例结构-index.wxml
<!-- 页面背景 --> <image src="{{bgImg}}" /> <!-- 上传图片按钮 --> <button bindtap="selectImage">上传图片</button> <!-- 检测结果 --> <view class="ret" wx:if='{{result}}'> <view>性别：{{result && result.gender>50?'男': '女'}}</view> <view>是否戴眼镜：{{result && result.glass }}</view> <view>颜值：{{result && result.beauty}}</view> <view>年龄：{{result && result.age}}</view> </view>案例样式-inde.wxss
image { position: fixed; width: 100%; height: 100%; } button { position: fixed; bottom: 100rpx; width: 300rpx; left: 50%; margin-left: -150rpx; } .ret { position: fixed; left: 50%; margin-left: -200rpx; bottom: 200rpx; width: 400rpx; height: 200rpx; color: #fff; background: rgba(0, 0, 0, 0.5) }案例逻辑-index.js
// pages/ai/index.js Page({ /** * 页面的初始数据 */ data: { bgImg: '/imgs/bg.jpg', result: null }, checkImage: function (path) { // 把选中的图片上传给AI接口进行颜值检测 wx.uploadFile({ // 上传的地址 url: 'https://ai.qq.com/cgi-bin/appdemo_detectface', // 本地选中的图片路径 filePath: path, // 用于服务器接收上传的图片 name: 'image_file', success: (res) => { let obj = JSON.parse(res.data) console.log(obj) if (obj.data.face.length === 0) { // 选中的图片不合理，请换一张再试 wx.showToast({ title: '选中的图片不合理，请换一张再试' }) return } this.setData({ result: obj.data.face[0] }) } }) }, selectImage: function () { // 本地相册选择图片或者调用摄像头拍照 wx.chooseImage({ // 选中图片的类型 sizeType: ['original', 'compressed'], // 选择图片的方式 sourceType: ['album', 'camera'], success: (res) => { // 获取选中图片的路径 let path = res.tempFilePaths[0] this.setData({ bgImg: path }) // 调用接口进行颜值检测 this.checkImage(path) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return { // 分享弹窗的标题 title: '试试你的颜值', // 分享的默认页面路径 path: '/pages/ai/index', // 弹窗缩略图的图片路径 imageUrl: '/imgs/pic.png' } } })配置文件index.json
{ "usingComponents": {} }实例图-上传数据信息
实例效果图
实例代码
