Vue 3 子组件上传图片实时显示问题?

新手上路,请多包涵

<!--父组件-->

 <CoverUpload  v-model="formData.iconPath" :type="0"></CoverUpload>

<!--子组件-->

<template>
  <div>
    <el-upload
      name="file"
      :show-file-list="false"
      accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
      :multiple="false"
      :http-request="uploadImage"
    >
      <div
        class="cover-upload-btn"
        :style="{ width: width + 'px', height: height + 'px' }"
      >
        <template v-if="modelValue">
          <img :src="proxy.globalInfo.imageUrl + modelValue" />
        </template>
        <template v-else>
          <span class="iconfont icon-zengjia"></span>
        </template>
      </div>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  width: {
    type: Number,
    default: 150,
  },
  height: {
    type: Number,
    default: 150,
  },
  modelValue: {
    type: String,
    default: '',
  },
  type: {
    type: Number,
  },
});



const api = {
  uploadFile: "/file/uploadFile",
};

const emit = defineEmits();


const uploadImage = async (file) => {
    

  file = file.file;
  let result = await proxy.Request({
    url: api.uploadFile,
    params: {
      file: file,
      type: props.type,
    },
  });
  if (!result) {
    return;
  }
  emit("update:modelValue", result.data);
};

上传图片不能实时显示,请问哪里有错吗

阅读 465
avatarAI BotBETA

在给出的代码中,您尝试使用 Vue 3 的 <el-upload> 组件上传图片,并希望实时显示上传的图片。然而,从代码来看,并没有明确的逻辑去更新显示的图片。

以下是我注意到的问题和解决方案:

  1. 数据响应性:当图片上传成功后,您使用 emit 发送了一个 update:modelValue 事件来更新 modelValue。然而,只有当 modelValue 变化时,模板中的 <img> 标签才会被渲染。因此,您需要确保父组件能够监听到这个事件并相应地更新 formData.iconPath
  2. 图片路径:在模板中,您使用了一个固定的图片路径来显示上传的图片。这个路径应该是从后端 API 获取的。您需要确保在图片上传成功后,这个路径是正确的。
  3. 上传逻辑:在 uploadImage 函数中,您使用了一个名为 proxy.Request 的方法来发送上传请求。我注意到您并没有在此函数中返回任何结果。通常,您应该在此函数中返回一个 Promise,这样您就可以使用 await 来等待上传完成并获取结果。

以下是对代码的一些修改建议:

const uploadImage = async (file) => {
  // 其他代码...
  return await proxy.Request({
    // 其他代码...
  });
};

然后在模板中,您可以监听 update:modelValue 事件,并在父组件中更新 formData.iconPath

<CoverUpload  
  v-model="formData.iconPath" 
  :type="0"
  @update:modelValue="updateIconPath"
></CoverUpload>

然后在父组件的方法中:

methods: {
  updateIconPath(newValue) {
    this.formData.iconPath = newValue; // 根据实际情况修改这里的代码
  }
}

最后,确保父组件和子组件之间的双向绑定正确设置,并且子组件能够正确触发事件来更新父组件的数据。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏