I want display image in vue3 page before save to database, but my code not working-CodePudding

I want display image before in vue3 page before save to database, but my code not working, i have done some checking but i got no result, any one can help me? this is my vue3 :

<script setup>
const getPhoto = () => {
  let photo = "/img/avatar.png"
  if(form.photo){
    if (form.photo.indexOf('base64') !=  -1){
      photo = form.photo 
    }
    else{
      photo = '/img/upload'   form.photo
    }
  }
  return photo
}

const changePhoto = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  let limit = 1024*1024*2

  if (file['size'] > limit){
    return false
  }
  reader.onloadend = (file) => {
    form.photo = reader.result
  }
  reader.readAsDataURL(file)
}

const updateAbout = () => {
  console.log('form', form)
}
</script>

this is template for showing image

<template>

<section >
      <div >
        <div >
          <div >
            <h1>Data Pengguna</h1>
          </div>
          
        </div>
      </div><!-- /.container-fluid -->
      <div >
        <div >
          <a href="#" >Kembali</a>
          <input type="submit" value="Simpan"  @click.prevent="updateAbout">
        </div>
      </div>

    </section>
    
    <!-- Main content -->
    <section >
      <div >
        <div >
          <div >
            <div >
              <h3 >Data Lengkap</h3>

              <div >
                <button type="button"  data-card-widget="collapse" title="Collapse">
                  <i ></i>
                </button>
              </div>
            </div>
            <div >
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <div >
          <div >
            <div >
              <h3 >Data Login</h3>

              <div >
                <button type="button"  data-card-widget="collapse" title="Collapse">
                  <i ></i>
                </button>
              </div>
            </div>
            <div >
              <div >
                <div >
                  <img src="getPhoto()"  alt="" />
                  </div>
                  <input type="file" @change="changePhoto"/>
              </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
      </div>
      
    </section>
    </template>

I don't find any error with inspect...

when I open laravel.log, it not show any error

any one can help me? thanks

CodePudding user response：

There's multiple things wrong with this code. First off, the "form" variable is not declared anywhere. This should show up in the console.

Second off, you cannot set a method to the src attribute of an image.

You need a ref variable holding the base64 of your image, like;

import { ref } from "vue";

...

const uploadedImageBase64 = ref();

Then, you need to change the base64 when you upload an image;

const changePhoto = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  let limit = 1024*1024*2

  if (file['size'] > limit){
    return false
  }
  reader.onloadend = (file) => {
    //Change this line
    uploadedImageBase64.value = reader.result
  }
  reader.readAsDataURL(file)
}

In the template you can then show this data as follows;

<img v-if="uploadedImageBase64" :src="`${uploadedImageBase64}`" />

Don't forget to remove all references to the non-existent "form" variable.

You can see it working here:

Demo