How to send the content of v-file-input?

Question

My component is something like this:

<template>
  <div>
    <v-file-input accept="image/*" v-model="image"></v-file-input>
    <button @click="uploadImage">Upload</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      image: null
    }
  },
  methods: {
    async uploadImage(){
      await this.$axios.put('url', {image: this.image})
    }
  }
}
</script>

If I click the button and send the request, the request payload is {image: {}}. Why? How to send the content of this.image?

kissu · Accepted Answer · 2021-06-21 17:46:33Z

2

You should probably use a POST rather than a PUT. But your code is working: if you console.log(this.image), you'll see the file, same goes for your Vue devtools in your browser.

I'm not sure how to see it in the network tab but this is properly sent to the given backend. I guess you just need a proper backend here.

This question may be useful here: How to see form data with enctype = "multipart/form-data" in Chrome debugger

Here is an MDN page talking about multipart/form-data objects even if there is no solution on how to see the actual payload neither: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

edited Jun 21, 2021 at 17:46

answered Jun 21, 2021 at 17:15

kissu

47.3k16 gold badges94 silver badges197 bronze badges

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

Comments

richxcame · Accepted Answer · 2021-06-22 23:49:51Z

1

Just send file with FormData. You can put this code into uploadImage():

let form = new FormData();
form.append(file, this.file);
this.$axios.post('url', form)

And then U can access it in server.

answered Jun 22, 2021 at 23:49

richxcame

1512 silver badges7 bronze badges

Comments

Adam Muse · Accepted Answer · 2021-07-16 04:51:12Z

0

here try this code pen i made codepen v-file-input

        addImage (file) {
        if (file) {
    const reader = new FileReader()

    reader.onload = (e) => {
      const imgObj = new Image()
      // console.log(e.target.result)
      imgObj.src = e.target.result
      // console.log(imgObj)
      this.imageHandler = imgObj
    }
    if (file) {
      reader.readAsDataURL(file)
    }
   } else {
    console.log('error')
  }
  }

major take aways:

const reader = new FileReader()

const imgObj = new Image()

imgObj.src = e.target.result

then reasign this.imageHandler = imgObj

answered Jul 16, 2021 at 4:51

Adam Muse

1

Collectives™ on Stack Overflow

How to send the content of v-file-input?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related