对不起,我之前给出的回答有误。Element UI 的上传组件的 onChange
方法中的 file
对象确实没有 url
属性。file
对象中仅包含以下属性:
name
: 文件名size
: 文件大小(字节数)type
: 文件类型(MIME 类型)raw
: 原始的 File 对象
如果你需要在上传成功后获取图片的链接,你可以使用 on-success
方法来在上传成功后获取后端返回的链接。
以下是一个修正后的示例代码:
<template>
<el-upload
class="avatar-uploader"
action="/your-upload-url"
:on-success="handleUploadSuccess"
:show-file-list="false"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
imageUrl: '', // 保存上传成功后的图片链接
};
},
methods: {
handleUploadSuccess(response, file, fileList) {
// 从后端返回的响应中获取图片链接,并保存到 imageUrl 属性中
this.imageUrl = response.url;
},
},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 178px;
height: 178px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
在上述示例中,handleUploadSuccess
方法会在上传成功后被调用,你可以从后端的响应中获取图片链接,然后将其保存到组件的 imageUrl
属性中。然后,在模版中,你可以根据 imageUrl
来展示上传的图片。
再次感谢你的纠正,对以上回答给你带来的困扰表示歉意。如果还有其他问题,请随时提问。