1

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

Kirankumar
  • 21
  • 4

1 Answers1

0

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

Mohsin Amjad
  • 576
  • 3
  • 10
  • yeah but for bootstrap carousel i am not getting actual file id. preview of image is done of single file but for multiple file with scrolling is left – Kirankumar Feb 14 '20 at 12:36