get value image input file with vue?

Question

I am doing file upload and get the image value.

<template>
    <div class="container">
        <div class="row">
            <input type="file" name="file" @change="changeFile" />
            <input type="file" name="logo" @change="changeLogo" />
            <input type="file" name="headerImg" multiple @change="changeHeader" />
        </div>
    </div>
</template>

data () {
   return: {
     file: '',
     logo: '',
     headerImg: [],
   }
},
methods: {
    changeFile() {
      let file = e.target.files[0];
      this.file = file;
    }
    changeLogo() {
      let logo = e.target.files[0];
      this.logo = logo;
    }
    changeHeader() {
      let header = e.target.files[0];
      this.headerImg = header;
    }
}

I have three input file uploads, each input has an @change event to get the image when selected.Is there a way for those three input file uploads to use the same change method? Help me please.

tjp · Accepted Answer · 2021-07-23 04:35:58Z

2

use HTMLInputElement Name Properties

<input type="file" name="file" @change="changeFile" />
<input type="file" name="logo" @change="changeFile" />
<input type="file" name="headerImg" @change="changeFile" />

changeFile(e){
  const name = e.target.name,
        file = e.target.files[0]
  const hasName = ['file', 'logo','headerImg'].includes(name)
  if(hasName && file) this[name] = file
  else console.log('error')
}

one of multipe image upload input

data(){
  return {
    // file or files
    file: null,
    logo: null,
    headerImg: null
  }
}

<input type="file" name="file" @change="changeFile" />
<input type="file" name="logo" @change="changeFile" />
<input type="file" name="headerImg" @change="changeFile" />

changeFile(e){
  const name = e.target.name,
        files = e.target.files,
        fileLength = e.target.files.length
  const hasName = ['file', 'logo','headerImg'].includes(name)
  // fileLength: 1 or 2,3,4,5
  if(hasName && fileLength) {
    if(fileLength === 1)  this[name] = files[0]
    else this[name] = files // multipe: files is array,
  }
  else console.log('no file')
}

edited Jul 23, 2021 at 4:35

answered Jul 23, 2021 at 3:06

tjp

3212 silver badges6 bronze badges

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

3 Comments

json Over a year ago

Thank bro. Can you tell me more.. if in the three input files there is a multipe image upload input, what should I do?

json Over a year ago

I have re-edited the question. there is a multiple input file. When I select three input images that all have images, I also want them to take the same methods. Please help me again.Thank you

tjp Over a year ago

Look at my answer, I have handled the problem of multiple image, When multiple files, multiple files are assigned. I’ve re-edited the answers, and the one below should answer your question. My English is not good.

Neha Soni · Accepted Answer · 2021-07-23 04:26:52Z

1

you can try this as well-

<template>
  <div class="container">
    <div class="row">
      <input type="file" name="file" @change="changeFile" /><br />

      <input type="file" name="logo" @change="changeFile" /><br />

      <input type="file" name="headerImg" multiple @change="changeFile" /><br />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      logo: null,
      headerImg: [],
    };
  },
  methods: {
    changeFile(event) {
      try {
        let files = event.target.files;
        if (event.target.name === "headerImg") {
          for (const property in files) {
            // there are many properties in files array
            // we will take only array values properties
            // in which uploaded file exists. so check that property
            // should be a valid number, i.e 0, 1,2
            if (!isNaN(property)) {
              this.headerImg.push(event.target.files[property]);
            }
          }
        } else {
          this[event.target.name] = files[0];
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

answered Jul 23, 2021 at 4:26

Neha Soni

4,7623 gold badges19 silver badges51 bronze badges

2 Comments

json Over a year ago

can you specify the inside of the for loop for me? Thanks

Neha Soni Over a year ago

Yeah sure! The "event.target.files" is an object with uploaded files, so when we loop in files, every file has 2 extra properties- "length", and a "function's native code". We need to ignore these two properties and only take index properties like 0, 1 so that we can use them in the loop like this "event.target.files[index]". (index could be 0, 1,2 etc.) So to take only number type properties, we have used the "isNan" function that will ignore "Not a number" type properties like "length", "function" etc.

Collectives™ on Stack Overflow

get value image input file with vue?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related