<template>
<div class="clearfix">
<a-upload
:action="uploadUrl"
list-type="picture-card"
:file-list="fileList"
:headers="headers"
@preview="handlePreview"
@change="handleChange($event)"
:before-upload="beforeUpload"
:remove="handelRemove"
>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
<script>
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
antd-vue上传图片组件封装
最新推荐文章于 2024-07-11 10:19:07 发布
本文详细介绍了如何使用 Ant Design Vue 框架封装一个图片上传组件,包括设置上传参数、处理文件预览、上传进度显示、以及错误处理等功能。通过此组件,可以方便地在 Vue 项目中实现用户友好的图片上传操作。
摘要由CSDN通过智能技术生成