上一篇介紹了環(huán)境的搭建，這一篇介紹開發(fā)細(xì)節(jié)。主要包括兩方面，

1. 調(diào)用Google Cloud Vision API 分析圖片
2. 微信小程序圖片上傳。

---

分析圖片（通過Vision API實(shí)現(xiàn)）

之前已經(jīng)配置好了調(diào)用API的環(huán)境，現(xiàn)在就來編寫代碼調(diào)用API。

# detect_labels.py
from google.cloud import vision

# 分成兩個(gè)函數(shù)是為了給django調(diào)用做準(zhǔn)備。
def call_vision_api(f):  # django調(diào)用此函數(shù)
    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'))

詳細(xì)說明見Google Cloud Vision API文檔和Python Using the Vision API

---

微信小程序圖片上傳

這里分為兩部分：

1. django服務(wù)端接收?qǐng)D片接口。
2. 微信小程序上傳圖片；

首先我先從服務(wù)端的接收接口開始介紹。

1）服務(wù)端上傳接口

現(xiàn)在我們的建立的django項(xiàng)目的目錄結(jié)構(gòu)

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

1. 首先在wxbackground/wxbackground/目錄下建立views.py。因?yàn)槲⑿判〕绦蛏蟼魇鞘前l(fā)送的POST情況，所以我們的view.py里面也應(yīng)該接收POST請(qǐng)求。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!')  # 測試

   同時(shí)需要修改同一目錄下的urls.py文件，這個(gè)是django的路由，通過在這個(gè)文件中配置才能正確的訪問到目標(biāo)函數(shù)。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),  # 這是剛才添加的函數(shù)
   ]

   配置完成后在manage.py路徑下輸入

   $:python3 manage.py runserver 0.0.0.0:8000

   在瀏覽器中輸入云虛擬機(jī)ip:8000/upload/測試是否配置完成，若配置ok則瀏覽器頁面會(huì)顯式“Hello world!”。

2. 在views.py編寫接收文件代碼，并調(diào)用之前寫的圖片分析函數(shù)。首先將剛才編寫的detect_labels.py放入當(dāng)前目錄下。
   由于我們并不想保存上傳的圖片，所以我們直接將上傳圖片流再上傳到谷歌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')  # 微信小程序上傳時(shí)‘name’字段命名為‘picture’
        if img is None:
            return HttpResponse('You need upload a picture!')
        # 下面調(diào)用剛才寫好的call_vision_api函數(shù)，然后將返回的結(jié)果轉(zhuǎn)換為字符串，返回給微信小程序。
        labels = detect_labels.call_vision_api(img)
        return  HttpResponse(str(labels))
    else:
        return HttpResponse('Hello world!')  # 測試

   這里說明一下，在django中，從FILES.get('picture')得到的文件類型為InMemoryUploadedFile類型，通過調(diào)用其read()函數(shù)，獲得圖片IO流。而Vision API需要的也是IO流，所以程序中直接將InMemoryUploadedFile作為call_vision_api函數(shù)的輸入不會(huì)發(fā)生類型錯(cuò)誤。
   

2）微信小程序上傳

在配置上傳之前，需要先在微信公眾平臺(tái)官網(wǎng)中，將域名添加到添加uploadFile合法域名?？梢詤⒖次⑿判〕绦?wx.request合法域名配置詳解。

微信小程序上傳需要兩個(gè)步驟：

1. 選擇圖片；
2. 上傳圖片。

在微信小程序API中wx.uploadFile(OBJECT)這里其實(shí)已經(jīng)介紹得很清楚了。
我的上傳代碼index.js如下：

const uploadFileUrl = 'https://yoursite/upload/'  # yoursite是你申請(qǐng)的域名。


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>

這里有個(gè)小坑，注意一下：微信小程序在電腦上開發(fā)時(shí)，wx.chooseImage中的sizeType: ['compressed']不會(huì)生效，只有在微信上調(diào)用小程序時(shí)才會(huì)生效。

---

完結(jié)

現(xiàn)在服務(wù)端與微信小程序已經(jīng)搭建完畢，現(xiàn)在我們就可以測試是否能夠上傳成功。完結(jié)撒花。