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