VUEJS предварительный просмотр изображения перед загрузкой с использованием bootstrap карусели или любой карусели

Question

Поэтому я хочу просмотреть изображение перед загрузкой изображения, используя bootstrap карусель или любую карусель в vuejs, но я не могу этого сделать, если у кого-то есть идея, пожалуйста, поделитесь со мной. Спасибо

Answer 1

Чтобы показать изображение, вы можете присвоить URL-адресу sr c, как только изображение будет полностью загружено на сервер, или если вы хотите показать изображение перед отправкой на сервер, вы должны закодировать ваш файл в формате base64, например, определить base64. переменная в данных

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)
  }
}

и затем вы можете проверить, загружен ли файл, вы должны просмотреть изображение непосредственно с URL, в противном случае в base64