programing

Axios를 사용하여 Blob으로 저장되는 POST 이미지 - VUEJS

sourcetip 2023. 1. 30. 22:51
반응형

Axios를 사용하여 Blob으로 저장되는 POST 이미지 - VUEJS

Blob으로 저장되는 데이터 이미지를 가지고 있지만, Axios에 게시하는 방법을 몰라서 VUEJS를 사용하고 있습니다.도와주세요.

My Object API by VueDevtool 여기에 이미지 설명 입력

<file-upload v-model="files"></file-upload>
<button type="submit" v-on:click.prevent="Submit">Submit</button>

<script>
  methods: {
    data: function () {
      return {
        config: {
          'headers': {'Authorization': 'JWT ' + this.$store.state.token},
          'Content-Type': 'multipart/form-data'
        }
    },
    methods:{
      for (var file in this.files) {
        let data = new FormData()
        data.append('image', this.file[0])
        data.append('caption', 'image')
        data.append('user', this.Authuser)
        api.post('/photos/create/', data, this.config)
      }
    }
  }
</script>

거의 다 왔어요.필요한 것은 실제 파일을 추가하는 것 뿐입니다.$event는 다음과 같이 함수에 전달해야 합니다.Submit($event)

    Submit(event) {
      let URL = '....'
    
      let data = new FormData()
    
      data.append('name', 'image')
      data.append('file', event.target.files[0])
      
      let config = {
        header : {
          'Content-Type' : 'multipart/form-data'
        }
      }
    
      axios.post(URL, data, config).then(response => {
        console.log('response', response)
      }).catch(error => {
        console.log('error', error)
      })
    }

언급URL : https://stackoverflow.com/questions/47809402/post-image-which-store-as-a-blob-with-axios-vuejs

반응형