Вставить изображение при загрузке

171

27 июля 2021, 14:50

есть инпут

<input type="file" name="image" @change="loadAvatar" id="file" class="avtara-in">

и метод загрузки фото

loadAvatar(event) {
      this.profile.image = event.target.files[0];
      this.profile.avatar = event.target.files[0]['name];
}

все работает, но this.profile.avatar присваивает только название, саму фотку не выводит

вот что выводит в консоле

File {name: "woomen.png", lastModified: 1565020016089, lastModifiedDate: Mon Aug 05 2019 18:46:56 GMT+0300 (Москва, стандартное время), webkitRelativePath: "", size: 25577, …}
lastModified: 1565020016089
lastModifiedDate: Mon Aug 05 2019 18:46:56 GMT+0300 (Москва, стандартное время) {}
name: "woomen.png"
size: 25577
type: "image/png"
webkitRelativePath: ""
__proto__: File
lastModified: (...)
lastModifiedDate: (...)
name: (...)
size: (...)
type: (...)
webkitRelativePath: (...)
constructor: ƒ File()
Symbol(Symbol.toStringTag): "File"
get lastModified: ƒ lastModified()
get lastModifiedDate: ƒ lastModifiedDate()
get name: ƒ name()
get webkitRelativePath: ƒ webkitRelativePath()
__proto__: Blob

Answer 1

Я так понял речь идет о реактивности объекта, если да, то то стоит почитать реактивность во vue

А так пример тут:

new Vue({ 
  el: '#app', 
  data: { 
    profile: {} 
  }, 
  methods: { 
    loadAvatar: function(e) { 
      console.log(e.target.files) 
      this.$set(this.profile, 'image', e.target.files[0]); 
      this.$set(this.profile, 'avatar', e.target.files[0]['name']); 
    } 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <input type="file" name="image" @change="loadAvatar" id="file" class="avtara-in"> 
  <hr> 
  profile: {{profile}} 
</div>

new Vue({ 
  el: '#app', 
  data: { 
    url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png' 
  } 
})

*{ 
  margin: 10px; 
} 
img{ 
  max-width: 200px; 
  padding-bottom: 30%; 
} 
 
input{ 
  display: block; 
  padding: 10px; 
  width: 100%; 
} 
 
 
li{ 
  list-style: none 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
 
  Земените ссылку на линк к любой картинке (можно свой): 
  <ul>Bот варианты: 
  <li> 
  https://habrastorage.org/webt/tj/zs/el/tjzseld78ryzmf6-cz2wp69tops.jpeg</li> 
  <li>https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png</li> 
  </ul> 
  <input type="text" v-model="url">  
  <img :src="url" alt="image" v-if="url"> 
</div>