Vue에서 Azure blob storage에 파일 업로드 하기 Express 사용

ejs처럼 프론트엔드와 백엔드가 같은 서버를 쓰면 전달이 잘되지만, 프론트 서버가 있어 통신을 할때 방법은 따로 있다.

 

vuetifyjs를 사용해서 프론트를 만들었다. 구동방식은 비슷하다. 

 

<template>
   <v-container>
      <form @submit.prevent="dataUpload">
        <v-text-field
        v-model="name"
        label="파일이름"      
        />
          <v-file-input
          v-model="blobData"
          show-size
          label="파일"
          />
        <v-btn
          class="mr-4"
          @click="dataUpload"
        >
          업로드
        </v-btn>
      </form>
    </v-container>
  </div>
</template>

<script>
export default {
  data: () => ({
    name:'',
    blobData: null   
  }),
  methods: {
    async dataUpload () {
        const fd = new FormData()
        fd.append('name', this.name)
        fd.append('blobData', this.blobData, { type: '*/*' })
        
        axios
        .post("/api주소", fd, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          console.log(res.statusText);
        })
        .catch((err) => {
          console.log(err);
          throw err;
        });
    }
  }
}

</script>

먼저

new FormData()를 사용해서 form 형식에 데이터와 파일을 넣어주면 된다.

하지만 주의 할 점이있다.

 

const fd = new FormData()

fd.append('name', this.name)

fd.append('blobData', this.blobData, { type: '*/*' })

 

이 부분에서 fd.append('name', this.name)같은 text값은 무조건 file 전에 있어야 한다.

fd.append('blobData', this.blobData, { type: '*/*' }) 같은 파일부분이 text값보다 먼저 있다면 file만 전송이 되고 text 값은 전송이 되지 않으니 주의 하자.

 

이렇게 프론트에서 백으로 값을 전달하면된다. 

 

백코드는 crispypotato.tistory.com/60 에 있는 백코드 처럼 써주면된다. 서로 연결을하려면 api 주소만 맞추어 주면된다.

 

fd.append('name', this.name)

fd.append('blobData', this.blobData, { type: '*/*' }) 양식 순서 때매 시간 소비를 많이 했다 다른 사람들은 이런 실수로 시간을 소비하지 않았으면 한다.