How to upload multiple images from different fields in VueJs?

Question

vuejs file

<v-form method="post" enctype="multipart/form-data">
            <div v-if="!loading">
            <v-card-text headline><h1>Please upload your documents</h1></v-card-text>
            <v-layout row class="pt-1">
              <v-flex xs12>
                <v-subheader>Photo A</v-subheader>
              </v-flex>
              <v-flex xs12>
                <input id="photoA" type="file" accept="image/*">
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-subheader>Photo B</v-subheader>
              </v-flex>
              <v-flex xs12>
                <input id="photo B" type="file" accept="image/*">
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-subheader class="text-sm-left">Photo C Statement</v-subheader>
              </v-flex>
              <v-flex xs12>
                <input id="photoC" type="file" accept="image/*">
              </v-flex>
            </v-layout>
            <div v-html="error" />
            <div>
              <v-btn round block color="blue darken-3" dark large @click="submitDocs">Upload</v-btn>
            </div>
            </div>
          </v-form>

script

submitDocs () {
  console.log("submit docs clicked!")
  const formData = new FormData()
  formData.append('myFile', this.selectedFile, this.selectedFile.name)
  axios.post('my-domain.com/file-upload', formData)
}

I am stucked in writing submitDocs. How do I do axios.post with photoA, photoB and photoC ? How do I get the file of photoA, photoB and photoC and upload it via axios.post ? Thank you in advance.

I would try to pass in the form element into the constructor new FormData(formElm) then everything in the form will be copied into formData — Endless
– Endless, Commented Aug 12, 2018 at 11:59
<input data-v-314a5c28="" id="photoA" type="file" accept="image/*"> how do I get the data of photoA and upload it ? @Endless — kylas
– kylas, Commented Aug 12, 2018 at 12:15

Max Liashuk · Accepted Answer · 2018-08-12 14:27:45Z

v-model is not supported on input[type=file] so you need to write your own handler for each input:

<input id="photoA" type="file" accept="image/*" @change="addFile('photoA', $event)">
...
<input id="photoA" type="file" accept="image/*" @change="addFile('photoB', $event)">
...
<input id="photoA" type="file" accept="image/*" @change="addFile('photoC', $event)">

Implementation of handler may look like this:

methods: {
  addFile(fileKey, event) {
    this[fileKey] = event.target.files[0];
    console.log('File added', fileKey, event.target.files[0]);
  },
}

Append each file to FormData

const formData = new FormData()
formData.append('photoA', this.photoA, this.photoA.name)
formData.append('photoB', this.photoB, this.photoB.name)
formData.append('photoC', this.photoC, this.photoC.name)
axios.post('my-domain.com/file-upload', formData)

But this approach is good only if you have a few pictures. If you'd like to use it for many images it's better to store then in array. E.g.

const formData = new FormData();
// let's say you have array of files in your `this.photos`
this.photos.map(photo => formData.append('photos[]', photo, photo.name);
axios.post('my-domain.com/file-upload', formData)

Simple demo is here https://codesandbox.io/s/kx7y3knvjr

Collectives™ on Stack Overflow

How to upload multiple images from different fields in VueJs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related