vue filepond Formdata로 가공해서 서버에 보내기

https://github.com/pqina/vue-filepond/issues/99

Combine normal form with filepond vuejs · Issue #99 · pqina/vue-filepond

참고했던 이슈

 

Focus를 둘 부분들은

@onUpdateFiles

server="/api"

 

server 프로퍼티를 없애면 멋대로 데이터를 보내버리는걸 방지할 수 있고,

내가 filepond에 올린 데이터들은 onUpdateFiles에서 가져올 수 있기때문에 그걸 가공해서 api를 다시 신청하면 된다.

 

<template>
  <div id="filepond">
    <FilePond
      v-if="refreshFlag"
      :label-idle="`Drop & Down <br />클릭해서 올리는것도 가능
      <p>※ 너무 큰건 올리지말아주세용</p>`"
      allow-multiple="true"
      accepted-file-types="image/jpeg, image/png"
      instant-upload="false"
      allow-revert="false"
      :image-preview-height="100"
      @updatefiles="onFilesUpdated"
    />
    <button class="btn btn-primary" @click="upload">업로드</button>
  </div>
</template>

<script lang="ts">
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import { Component, Prop, Vue } from 'nuxt-property-decorator'
import vueFilePond from 'vue-filepond'
import { $axios } from '~/utils/api'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview)
@Component({
  components: {
    FilePond,
  },
})
export default class ImageUpload extends Vue {
  @Prop({ default: 0 })
  private lastOrderNum!: number
  private refreshFlag: boolean = true
  private uploadImages: File[] = []
  private onFilesUpdated(files: any) {
    this.uploadImages = files.map((files: any) => files.file)
  }
  private async upload() {
    try {
      this.refreshFlag = false
      const data = new FormData()
      this.uploadImages.forEach((file, index) => {
        data.append('orderNum', JSON.stringify(this.lastOrderNum + (index + 1)))
        data.append('contentType', JSON.stringify(file.type))
        data.append('imagefile', file)
      })
      await $axios.post('http://localhost:3000/image', data)
      this.refreshFlag = true
    } catch (e) {
      console.error(e)
    }
  }
}
</script>