POST Image which store as a Blob with Axios - VUEJS

Question

I have a data Image which store as a Blob but I dont know how to post it with Axios, I use VUEJS. Please help me.

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>

@RishiRaut no. Image which store as a Blob, bro

KitKit
– KitKit

2017-12-14 09:05:14 +00:00
Commented Dec 14, 2017 at 9:05 — KitKit
– KitKit, Commented Dec 14, 2017 at 9:05

Marcello B. · Accepted Answer · 2020-08-19 19:42:33Z

14

You are almost there. The only thing you need is to append the actual file and you should pass $event to your function as: 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)
      })
    }

edited Aug 19, 2020 at 19:42

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

answered Dec 14, 2017 at 9:05

samayo

16.5k13 gold badges95 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

KitKit Over a year ago

I got this error: Uncaught TypeError: Cannot read property '0' of undefined

samayo Over a year ago

Ah, sorry that is supposed to be in your input, but since you are using a file upload? component then maybe use the model this.files[0]

KitKit Over a year ago

If i make methods like this, it came to error: Cannot read property 'append' of undefined

samayo Over a year ago

Why do you need <file-upload> component? You can upload with it

Alan Yong Over a year ago

which part of this code convert image to blob?

|

Collectives™ on Stack Overflow

POST Image which store as a Blob with Axios - VUEJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related