当前位置:网站首页>a-upload上传图片
a-upload上传图片
2022-08-11 10:43:00 【Mr.Meng_95】
a-upload上传图片
<a-upload
list-type="picture-card"
:file-list="fileList"
:beforeUpload="beforeUploadMains"
@change="handleChangeImg"
:showUploadList="{
showPreviewIcon: false
}"
>
<div v-if="fileList.length < 2">
// 确定上传图片数量
<a-icon type="plus" />
</div>
</a-upload>
fileList: [],
beforeUploadMains(file, e) {
let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
if (!isJpgOrPng) {
this.$message.error('格式错误,只能上传jpg、jpeg、png');
return reject(false);
}
return false; // 阻止upload默认上传事件
},
handleChangeImg({
fileList }) {
this.fileList = fileList;
console.log(this.fileList);
},
效果
按钮上传
<a-upload
list-type="picture"
:fileList="fileList"
:beforeUpload="beforeUploadMains"
@change="handleChange"
>
<a-button type="primary" @click="addmsg">新增</a-button>
</a-upload>
fileList: [],
beforeUploadMains(file, e) {
let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
if (!isJpgOrPng) {
this.$message.error('格式错误,只能上传jpg、jpeg、png');
return reject(false);
}
return false; // 阻止upload默认上传事件
},
handleChange(info) {
// 上传图片api
console.log(info);
},
边栏推荐
猜你喜欢
[Central Task Scheduling System - Communication Development]
【Mysql系列】03_系统设计
如何给女朋友解释什么是缓存穿透、缓存击穿、缓存雪崩?
PerfView project (first) : how to find hot spots function
chrome无痕浏览模式中使用插件
LeetCode · Question of the Day · 1417. Reformatting String · Simulation
Convolutional Neural Network Gradient Vanishing, The Concept of Gradient in Neural Networks
SDS观察站
SAP 产品增强技术回顾
分析 Flink 任务如何超过 YARN 容器内存限制
随机推荐
【学习笔记】线性规划对偶定理
困扰所有SAP顾问多年的问题终于解决了
Database indexes and their underlying data structures
二维数组名的用途
fetch请求设置请求头错误导致无法跨域
力扣打卡----打家劫舍
AcWing 273. 分级(线性DP+结论)
Convolutional Neural Network System,Convolutional Neural Network Graduation Thesis
日志使用注意事项和建议
form-making notes on climbing pits (jeecg project replaces form designer)
数据库 SQL 优化大总结之:百万级数据库优化方案
servlet——servlet执行流程 | servlet关系视图
大疆2022秋招笔试 —— 最小时间差、数组的最小偏移量
阿里内网疯传的P8“顶级”分布式架构手册被我拿到了
logstash/filebeat only receives data from the most recent period
Algorithm---Jumping Game (Kotlin)
MySQL表sql语句增删查改_查询
Have you encountered this kind of error? flink-sql writes to clickhouse
[Building a 2D rasterized map using SLAM technology]
为什么有些人不喜欢出身底层的人?