Vue3页面未存入数据库前图片预显功能失效求助

你的代码存在三个关键问题导致预览功能无法正常工作，以下是具体问题和修复方案：

1. 图片src未使用响应式绑定 #

模板中<img>标签的src属性直接写了"getPhoto()"，这会被浏览器解析为字符串URL，而非调用函数获取动态值。需要使用Vue的v-bind指令（简写为:）来绑定函数返回值。

2. 未声明响应式的form对象 #

在<script setup>中，form变量未通过ref或reactive声明为响应式数据，导致form.photo变化时无法触发视图更新。

3. 回调函数参数命名冲突 #

changePhoto函数中，onloadend的回调参数命名为file，与外部的file变量重名，虽不报错但易引发逻辑混淆，建议修改参数名。

修复后的完整代码 #

Script部分

<script setup>
import { reactive } from 'vue'

// 声明响应式form对象
const form = reactive({
  photo: ''
})

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) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  const limit = 1024 * 1024 * 2 // 2MB限制

  if (file.size > limit){
    alert('图片大小不能超过2MB')
    return false
  }
  // 修改回调参数名避免冲突
  reader.onloadend = () => {
    form.photo = reader.result
  }
  reader.readAsDataURL(file)
}

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

Template部分

<template>
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Data Pengguna</h1>
      </div>
    </div>
  </div><!-- /.container-fluid -->
  <div class="row">
    <div class="col-12">
      <a href="#" class="btn btn-secondary">Kembali</a>
      <input type="submit" value="Simpan" class="btn btn-success float-right" @click.prevent="updateAbout">
    </div>
  </div>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-6">
      <div class="card card-primary">
        <div class="card-header">
          <h3 class="card-title">Data Lengkap</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card card-secondary">
        <div class="card-header">
          <h3 class="card-title">Data Login</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="form-group">
            <div class="avatar_profile">
              <!-- 使用v-bind绑定src -->
              <img :src="getPhoto()" alt="用户头像" />
            </div>
            <input type="file" @change="changePhoto" accept="image/*"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

额外优化：给文件输入框添加accept="image/*"属性，限制只能选择图片文件，提升用户体验。

内容的提问来源于stack exchange，提问作者mantra kode