如何使用Antd的图片上传组件
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;
}
如何使用Antd的图片上传组件的更多相关文章
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- 图片上传组件webuploader
前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net MVC来做的): 执行顺序:(get)Record/Add——A ...
- vux-uploader 图片上传组件
1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...
- 【antd Vue】封装upload图片上传组件(返回Base64)
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
随机推荐
- pve apt 更新
解决pve6.2/pve6.3 安装ifupdown2,失败问题 https://www.cnblogs.com/lovesKey/p/14400874.html https://blog.whsir ...
- spring的aop的粗浅理解
aop有什么用? 假设你写了一本书,写的是一个平民的日常聊天.现在突然你想让这个平民变成一个书生的口气.于是你想在这个平民的每句话之前加上"之乎",后面加上"者也&quo ...
- ApiPost前后端人员可以使用的接口测试工具还带生成文档
整体界面都是全中文非常适合过来使用,在本来使用过 对比来说这个工具调试和界面优化以及生成文档方面都是无可挑剔的 接口请求的参数描述也可以按自己的需求来设置后生成文档,方便了后端接口人员测试后回馈给前端 ...
- Django安装与启动
安装 python -m pip install Django 查看版本 python -m django --version打开命令行,cd 到一个你想放置你代码的目录,然后运行以下命令: dja ...
- 使用pyspark 建立spark 的累加器
一,累加器特征 1,PySpark累加器是一个共享变量,与RDD和DataFrame一起使用,以执行与Map reduce计数器类似的求和和和计数器操作. 2,只有分布在各个节点上的task任务才能更 ...
- dcloud打包安卓隐私政策上架问题!
友情链接: https://ask.dcloud.net.cn/article/36937 两种方式: 方式1. 使用dcloud的方式,在打包文件中配置 隐私json文件,使用dclould封装的隐 ...
- 快速上手springboot(2)
简介 Spring程序的缺点: 1.依赖设置繁琐 2.配置繁琐 SpringBoot程序优点 1.起步以来(简化依赖配置) 2.自动配置(简化常用工程相关配置) 3.辅助功能(内置服务器,...) S ...
- Charles抓包工具详解
学习Charles能做什么: 能够用charles分析前后端问题 能够使用charles模拟弱网测试环境 能够使用charles断点构建异常的测试环境 Charles 简介 1.Charles是什么? ...
- Mybatis缓存(3)
10.4.3二级缓存
- noi 2.1基本算法之枚举
7647:余数相同问题 1.描述 已知三个正整数 a,b,c. 现有一个大于1的整数x,将其作为除数分别除a,b,c,得到的余数相同. 请问满足上述条件的x的最小值是多少? 数据保证x有解. 2.输入 ...