Day 07 - RESTful API 在 Amazon Linux 2 上传图片实作

yehchitsai
216 阅读4分钟

Day 07 - RESTful API 在 Amazon Linux 2 上传图片实作

RESTful API 规格书

因为 RESTful API 需要前后端的合作，前端呼叫，后端设计开发，因此最好在正式运作之前先撰写 RESTful API 规格书，如下图所示。必须要确认的资讯有：

  • 功能说明：用来说明这个服务所提供的目的。
  • 服务路径 (URI)： /imgUpload/
  • 请求方法：POST
  • 请求格式：multipart/form-data，需要说明，不然前端不知该如何传递资料的编码方式。
  • 请求输入的参数说明：fileUpload，这必须要前后端一致，所以必须好好描述，名称是必要的，资料型态也要确认，有些参数是选择性的，也可以在说明中详述。
  • 回应格式：JSON，这是前端需要清楚，这样才能知道该如何处理资料。
  • 回应内容说明：fishQtn，如同请求输入的参数说明一样，必须要告诉后端开发者，前端的需求。
  • 请求回应范例：最好是提供，这样可以让前后端开发者都可以测试功能是否正确。

在这里插入图片描述
图 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 按钮，可以让使用者从电脑中选择一个图片

在这里插入图片描述
图 2、Advanced REST Client 设定前端请求

进行后端 Django 撰写

打开终端机或是 Putty 连线到 AWS EC2，进行 Django 后端程式的撰写，因为对应到的是 POST 的请求，所以只需要修改 post 方法的修改即可。
新增一个文件夹 upload 用来存放图片，要特别注意相对应的文件夹位置，upload 的所在位置与 fishsite 应用是同等的，如下图所示。

cd ~/fishRecognition/fishsite
mkdir upload

在这里插入图片描述
图 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)

在这里插入图片描述
图 4、后端 RESTful API 部分程式码

完成了这一部分程式码后就可以启动 Django Web 伺服器功能，然后透过 ARC 来呼叫后端服务，成功的话可以看到以下的画面，正常回传回应。

python3 manage.py runserver 0.0.0.0:8000

在这里插入图片描述
图 5、ARC 来呼叫后端服务

也在到后端去确认一下档案是否有写入，除了确认档案名称外，也要确认档案大小是否正确，如下图所示。

在这里插入图片描述
图 6、确认后端是否有正确接收档案

参考资料

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖

avatar
文章
阅读
粉丝