Как получить data картинки или src полный без fakepath в input file через vue?

Question

[Макс Жуков]

К примеру у меня есть input file и когда я выбираю файл мне нужно в переменную запихнуть данные картинки(data64......), возможно через v-model?
или другой вариант получить src без fakepath.

Answer 1

[0xD34F]

Так:

data: () => ({
  src: null,
}),
methods: {
  onChange(e) {
    const file = (e.target.files || e.dataTransfer.files)[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => this.src = reader.result;
      reader.readAsDataURL(file);
    }
  },
},

<input type="file" @change="onChange">

??

Comments

[Макс Жуков]

Да, только вот у меня 2 изображения и 2 input и можно ли параметр добавить типо fileRead(src_img) к примеру в 1 input и fileread(src_img_bg) в 2 input и в функции еще второ параметр добавить нужно?

[0xD34F]

Можно и два инпута:

data: () => ({
  src: {
    src1: null,
    src2: null,
  },
}),
methods: {
  onChange(e) {
    const file = (e.target.files || e.dataTransfer.files)[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => this.src[e.target.id] = reader.result;
      reader.readAsDataURL(file);
    }
  },
},

<input v-for="(v, k) in src" :id="k" type="file" @change="onChange">

[Макс Жуков]

а можно как-нибудь без , чтобы было 2 input вписано было, просто в проекте на который меня посадили они находятся на приличном расстоянии в DOM)

[0xD34F]

"Без" - это без v-for? Ну закопипастьте сколько надо, id только уникальные должны быть:

<input id="src1" type="file" @change="onChange">
<input id="src2" type="file" @change="onChange">

[Макс Жуков]

0xD34F, Спасибо большое!