上一篇介绍了环境的搭建，这一篇介绍开发细节。主要包括两方面，

1. 调用Google Cloud Vision API 分析图片
2. 微信小程序图片上传。

---

分析图片（通过Vision API实现）

之前已经配置好了调用API的环境，现在就来编写代码调用API。

# detect_labels.py
from google.cloud import vision

# 分成两个函数是为了给django调用做准备。
def call_vision_api(f):  # django调用此函数
    vision_client = vision.Client()
    image = vision_client.image(content=f.read())
    labels = image.detect_labels()
    label_list = [label.description for label in labels]
    return label_list


def detet_image(file_name):
    with open(file_name, 'rb') as f:
        return call_vision_api(f)


if __name__ == '__main__':
    print(detet_image('test.jpg'))

详细说明见Google Cloud Vision API文档和Python Using the Vision API

---

微信小程序图片上传

这里分为两部分：

1. django服务端接收图片接口。
2. 微信小程序上传图片；

首先我先从服务端的接收接口开始介绍。

1）服务端上传接口

现在我们的建立的django项目的目录结构

wxbackground/
├── db.sqlite3
├── manage.py
└── wxbackground
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

1. 首先在wxbackground/wxbackground/目录下建立views.py。因为微信小程序上传是是发送的POST情况，所以我们的view.py里面也应该接收POST请求。view.py中代码如下。

   # view.py
   from django.http import HttpResponse
   def upload(request):
    if request.method == 'POST':  # 判断是否是POST类型
        return HttpResponse('This is POST!')  # 测试
    else:
        return HttpResponse('Hello world!')  # 测试

   同时需要修改同一目录下的urls.py文件，这个是django的路由，通过在这个文件中配置才能正确的访问到目标函数。urls.py代码如下：

   # urls.py
   from django.conf.urls import url
   from django.contrib import admin
   from . import views
   urlpatterns = [
    url(r'^admin/', admin.site.urls),  # 这是管理界面
    url(r'^test/', views.upload),  # 这是刚才添加的函数
   ]

   配置完成后在manage.py路径下输入

   $:python3 manage.py runserver 0.0.0.0:8000

   在浏览器中输入云虚拟机ip:8000/upload/测试是否配置完成，若配置ok则浏览器页面会显式“Hello world!”。

2. 在views.py编写接收文件代码，并调用之前写的图片分析函数。首先将刚才编写的detect_labels.py放入当前目录下。
   由于我们并不想保存上传的图片，所以我们直接将上传图片流再上传到谷歌API中检测。
   view.py中代码如下：

   # view.py
   from django.http import HttpResponse
   from . import detect_labels
   def upload(request):
    if request.method == 'POST':  # 判断是否是POST类型
        img = request.FILES.get('picture')  # 微信小程序上传时‘name’字段命名为‘picture’
        if img is None:
            return HttpResponse('You need upload a picture!')
        # 下面调用刚才写好的call_vision_api函数，然后将返回的结果转换为字符串，返回给微信小程序。
        labels = detect_labels.call_vision_api(img)
        return  HttpResponse(str(labels))
    else:
        return HttpResponse('Hello world!')  # 测试

   这里说明一下，在django中，从FILES.get('picture')得到的文件类型为InMemoryUploadedFile类型，通过调用其read()函数，获得图片IO流。而Vision API需要的也是IO流，所以程序中直接将InMemoryUploadedFile作为call_vision_api函数的输入不会发生类型错误。
   

2）微信小程序上传

在配置上传之前，需要先在微信公众平台官网中，将域名添加到添加uploadFile合法域名。可以参看微信小程序 wx.request合法域名配置详解。

微信小程序上传需要两个步骤：

1. 选择图片；
2. 上传图片。

在微信小程序API中wx.uploadFile(OBJECT)这里其实已经介绍得很清楚了。
我的上传代码index.js如下：

const uploadFileUrl = 'https://yoursite/upload/'  # yoursite是你申请的域名。


Page({
  data: {
    imageSrc: null,
  },
  chooseImage: function () {  //绑定的chooseImage控件
    var that = this
    wx.chooseImage({ // 选定图片
      sourceType: ['camera', 'album'], 
      sizeType: ['compressed'],  //这里选择压缩图片
      count: 1,
      success: function (res) {
        console.log(res)
        that.setData({
          imageSrc: res.tempFilePaths[0]
        })
      }
    })
  },
  check: function (e) {  // 绑定的check button
    var that = this
    wx.uploadFile({  // 上传图片
      url: uploadFileUrl,
      name: 'picture',
      filePath: that.data.imageSrc,
      formData: {
        'user': 'test'
      },
      success: function (res) {
        console.log('imageSrc is:', that.data.imageSrc)
        console.log('uploadImage success, res is:', res)
        wx.showModal({
          title: "图片详情",
          content: res.data,
          showCancel: false,
          confirmText: "确定"
        })
      },
      fail: function ({errMsg}) {
        console.log('uploadImage fail, errMsg is', errMsg)
      }
    })
  },
  reload: function (e) {  // 绑定的reload button
    this.setData({
      imageSrc: null
    })
  }
})

微信小程序界面布局index.wxml如下：

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-body-info">
        <block wx:if="{{imageSrc}}">
          <view class="weui-uploader__files">
            <view class="weui-uploader__file">
              <image class="weui-uploader__img" src="{{imageSrc}}"></image>
            </view>
          </view>
        </block>
        <block wx:else>
          <view class="image-plus image-plus-nb" bindtap="chooseImage">
            <view class="image-plus-horizontal"></view>
            <view class="image-plus-vertical"></view>
          </view>
          <view class="image-plus-text">选择图片</view>
        </block>
      </view>
      <view class="body-view">
        <button type="default" bindtap="check">检测</button>
      </view>
      <view class="body-view">
        <button type="default" bindtap="reload">重置</button>
      </view>
    </view>
  </view>
</view>

这里有个小坑，注意一下：微信小程序在电脑上开发时，wx.chooseImage中的sizeType: ['compressed']不会生效，只有在微信上调用小程序时才会生效。

---

完结

现在服务端与微信小程序已经搭建完毕，现在我们就可以测试是否能够上传成功。完结撒花。