如何使用Antd的图片上传组件
2024-09-08 10:51:37
html结构如下
<a-upload
v-model:file-list="fileList" //已经上传的文件列表(受控)
name="avatar"
list-type="picture-card" //上传列表的内建样式,支持三种基本样式 text, picture 和 picture-card
class="avatar-uploader"
:show-upload-list="false" //是否展示 uploadList, 可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon
action="/app/uploadImage" //你图片的上传地址
:before-upload="beforeUpload" //可以限制上传的文件和文件大小
@change="handleChange" //上传中、完成、失败都会调用这个函数。
>
<img style="width: 86px;" v-if="form.pic_url" :src="form.pic_url"/>
<div v-else>
<img style="width: 66px;" src="/static/img/check/abc.png" > //默认展示的图片
<div class="ant-upload-text">点击更换</div>
</div>
</a-upload>
下面是方法
handleChange(info) {
if (info.file.status === 'done') {
if (info.file.response.res != 0) {
return this.$message.error(info.file.response.msg);
}
this.form.pic_url = info.file.response.data.image_url //赋值
}
},
//控制奖品图片的图片大小
beforeUpload(file){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('您只能上传jpeg或png文件!');
}
const isLt10K = file.size / 1024 < 10;
if (!isLt10K) {
this.$message.error('图片大小不能超过10K!');
}
return isJpgOrPng && isLt10K;
}
最新文章
- [精品书单] C#/.NET 学习之路——从入门到放弃
- ArcGIS中国工具应用:固定比例尺固定纸张批量打印
- Ubuntu系统下Xen虚拟机的基本安装方法(代码创建)
- [手机取证] “神器”IP-BOX的一些问题
- CSS样式重置
- [bzoj1068]压缩[区间动规]
- centos shell编程6一些工作中实践脚本 nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志 直接送给bc做计算 gzip innobackupex/Xtrabackup 第四十节课
- http1.1和http1.0区别
- 跟着PHP100第一季学写一个CMS(11-20)
- android数据库(随apk一起发布数据库)
- C++ 书籍
- Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(五)
- AFNetWorking网络请求
- poj3417 Network 树形Dp+LCA
- JEESZ分布式框架简介
- 基于socket.io的实时在线选座系统
- 02_编写Table的CRUD
- PHP memcached memcache 扩展安装
- 第14月第17天 automaticallyAdjustsScrollViewInsets contentInsetAdjustmentBehavior
- C#中Invoke的用法2