Django Rest Framework（DRF）とVuetifyを使って，csvファイルを読み込ませる

はじめに

この記事ではDjango Rest Framework（DRF）とVuetifyを使って，csvファイルをバックエンド側で読み込ませる流れを記載します．これをやろうと思った時に少しつまづいたのでその備忘録です．

Vuetify側

<v-form type="submit">
<v-file-input  @change="onChange($event)"></v-file-input>
<v-btn @click="Submit()">
</v-form>

• <v-file-input @change="onChange($event)"></v-file-input>でファイルを読み込むことができます．ファイルを挿入すると$eventの中身に格納されます．読み込んだら下の感じで見れます．

• 通常のinput type="file"でやる方法で下の中身を出力するにはevent.target.files[0]を記載します．

script側の記載方法は以下の通りです．

data(){
return {
  file:""
}}
methods:{

onChange(event){
console.log(event);
this.file = file;
},
 async Submit() {
      const formData = new FormData();
      formData.append("file", this.file);
  
        await this.$axios.post("test/", formData)
        .catch(error => {
          return error.response;
        });
     
    }
  }

• onChangeでファイルが入力されたのを確認しています．this.fileでファイル情報を格納．

• test.csvの中身を確認したいときはFileReaderのオブジェクトが必要となるので，別途作成する必要があります．

• buttonがクリックされたらSubmitが発火．ファイル情報はFormDataで格納します．

DRF側

import  pandas as pd
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(["POST"])
def api_view(request):
    if request.method == "POST":
        print(pd.read_csv(request.data["file"]))
        return Response(request.data,status=status.HTTP_200_OK)

• バックエンド側でapi_viewのurlを作成し，そこにPOSTをします．その上でpd.read_csv()をするとcsvの中身をバックエンド側で読み込むことが容易にできます．

終わりに

今回はvuetifyの機能でファイルを読み込むことをしてみました．