iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
AI & Data

觀賞魚辨識的YOLO全餐系列 第 7

RESTful API 在 Amazon Linux 2 上傳圖片實作-Day 07

RESTful API 在 Amazon Linux 2 上傳圖片實作-Day 07

RESTful API 規格書

因為 RESTful API 需要前後端的合作,前端呼叫,後端設計開發,因此最好在正式運作之前先撰寫 RESTful API 規格書,如下圖所示。必須要確認的資訊有:

  • 功能說明:用來說明這個服務所提供的目的。
  • 服務路徑 (URI): /imgUpload/
  • 請求方法:POST
  • 請求格式:multipart/form-data,需要說明,不然前端不知該如何傳遞資料的編碼方式。
  • 請求輸入的參數說明:fileUpload,這必須要前後端一致,所以必須好好描述,名稱是必要的,資料型態也要確認,有些參數是選擇性的,也可以在說明中詳述
  • 回應格式:JSON,這是前端需要清楚,這樣才能知道該如何處理資料。
  • 回應內容說明:fishQtn,如同請求輸入的參數說明一樣,必須要告訴後端開發者,前端的需求。
  • 請求回應範例:最好是提供,這樣可以讓前後端開發者都可以測試功能是否正確。

https://ithelp.ithome.com.tw/upload/images/20210907/2012951058Prr1H7lf.png
圖 1、上傳圖片的 RESTful API 規格範例

設定前端請求

有了這個規格書,就可以開始進行後端的開發,很明顯的,我們這個專案只需要一個 RESTful API 功能,就是上傳一張圖片,由後端來判斷這張圖片是屬於哪一種魚類,但因為魚類辨識功能尚未實作,所以我們在此只完成上傳圖片功能,而回應部分就固定回應一個答案就好,這樣方便前端進行開發。

打開 Advanced REST client (ARC)並根據規格書來進行設定,如下圖所示:

  • 請求方法:POST
  • 服務路徑 (URI): http://[EC2_IPv4]:8000/imgUpload/
  • 請求格式:選擇 BODY 頁籤,格式選擇 Multipart form data
  • 請求輸入的參數說明:點選下方的 ADD FILE PART 按鈕,輸入
    • Name: fileUpload
    • Value: 點擊 CHOOSE FILE 按鈕,可以讓使用者從電腦中選擇一個圖片

https://ithelp.ithome.com.tw/upload/images/20210907/20129510d0Yo8iz25V.png
圖 2、Advanced REST client 設定前端請求

進行後端 Django 撰寫

打開終端機或是 Putty 連線到 AWS EC2,進行 Django 後端程式的撰寫,因為對應到的是 POST 的請求,所以只需要修改 post 方法的修改即可。
新增一個文件夾 upload 用來存放圖片,要特別注意相對應的文件夾位置,upload 的所在位置與 fishsite 應用是同等的,如下圖所示。

cd ~/fishRecognition/fishsite
mkdir upload

https://ithelp.ithome.com.tw/upload/images/20210907/201295100AzVyKN5Lb.png
圖 3、圖片文件夾的所在位置

修改 fishsite/view.py 的 post 方法,主要有三部分,第一部分是接收前端所傳來的圖片,第二部分是查詢資料庫,而第三部分則是加上 fishQtn 魚隻數量的欄位,以符合規格書的要求

    def post(self, request, *args, **krgs):
        print('FishView->post')
        uploadFile = request.FILES.get('fileUpload')
        # write the uploaded file into the server
        filename = r'upload/{}'.format(uploadFile.name)
        with open(filename, 'wb') as f:
            for chunk in uploadFile.chunks():
                f.write(chunk)
        print('FishView->upload')
        sql = "SELECT fishName, distribution, LatinName FROM fishInfoTbl WHERE mark=1"
        with connection.cursor() as cursor:
            cursor.execute(sql)
            data = dictfetchall(cursor)
        print('FishView->' + sql)
        data[0]['fishQtn']=1
        return JsonResponse(data,safe=False)

https://ithelp.ithome.com.tw/upload/images/20210907/20129510NhPIOI59NG.png
圖 4、後端 RESTful API 部分程式碼

完成了這一部分程式碼後就可以啟動 Django Web 伺服器功能,然後透過 ARC 來呼叫後端服務,成功的話可以看到以下的畫面,正常回傳回應。

python3 manage.py runserver 0.0.0.0:8000

https://ithelp.ithome.com.tw/upload/images/20210907/20129510gIfmU6BDdU.png
圖 5、ARC 來呼叫後端服務

也在到後端去確認一下檔案是否有寫入,除了確認檔案名稱外,也要確認檔案大小是否正確,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210907/20129510VSeskLiFcl.png
圖 6、確認後端是否有正確接收檔案

參考資料


上一篇
Django + MariaDB + RESTful API + ARC-Day 06
下一篇
Amazon Linux 2 上將 Django 與 Nginx 整合 -Day 08
系列文
觀賞魚辨識的YOLO全餐38

尚未有邦友留言

立即登入留言