VUEJS preview image before upload using bootstrap carousel or any carousel

Question

So I want to preview image before image upload using bootstrap carousel or any carousel in vuejs, But I am not able to do that if anybody has idea please share with me. Thanks

Answer 1

In order to show the image you can give url to src once the image is completely uploaded to server or if you want to show image before sending to server you have to encode your file in base64 format like this define base64 variable in data

onChangeFileUpload ($event) {
  this.file = $event.files[0]
  this.encodeImage(this.file)
},
encodeImage (input) {
  if (input) {
    const reader = new FileReader()
    reader.onload = (e) => {
      this.base64Img = e.target.result
    }
    reader.readAsDataURL(input)
  }
}

and then you can check if file is uploaded you should view image directly from url otherwise in base64