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

<!--父组件-->

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

<!--子组件-->

<template>

<div>

<el-upload

name="file"

:show-file-list="false"

accept=".jpg,.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);

};

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

以上是 Vue 3 子组件上传图片实时显示问题? 的全部内容, 来源链接: utcz.com/p/935233.html

回到顶部