如何使用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,需要 ...
随机推荐
- 判断python socket服务端有没有关闭的方法
通过 getattr(socket, '_closed') 的返回值可以判断服务端的运行状态. True 是关闭状态,False 是运行中. import socket ip = 'localhost ...
- Java笔记_构造方法/构造器
构造方法/构造器(constructor) 怎么来的?之前在创建对象时,是先把一个对象创建好后,再给这个对象的属性赋值,如果现在要求在创建一个对象时,就直接指定这个对象的属性,该怎么做?此时就可以 ...
- Firefox彻底禁用自动更新提示
实验版本:96 安装目录下新建文件夹:distribution 新建文件:policies.json 文件内容为: { "policies": { "DisableApp ...
- PHP-循环文件夹-yield-生成器
<?php define(DS, DIRECTORY_SEPARATOR); function gen_dir($path='.'){ $c_dir = opendir($path); whil ...
- 莫凡Python 3
莫凡Python 3 新建模板小书匠 CNN 卷积神经网络 参考资料 https://morvanzhou.github.io/tutorials/machine-learning/keras/2-3 ...
- VMware Workstation 未能启动VMware Authentication Service
(1)今天像往常一样打开vmware启动虚拟机,但是弹出个框,显示VMware Workstations 未启动VMware Authorization Service,让我尝试手动启动. (2)Wi ...
- socket-消息发送实战
1. 函数用法 Handle.oobtainMessage(int what ,int arg1,int arg2,object obj) 2. 消息内容 3. 代码组合(隐私模式开关) 3.1 ...
- 第二周day6
第二周day6,星期六 所花时间:0 代码量:0 搏客量:1 了解到的知识点:多锻炼.
- Linux 系统镜像分类和包管理工具
查看系统版本 cat /proc/version 可以看到如下返回,Linux是RedHat系统 Linux version 4.18.0-372.9.1.el8.x86_64 (mockbuild@ ...
- twenty two
打包处理less文件 1,运行npm i less-loader@10.0.1 less@4.1.1 -D 2, 在webpack.config.js的module->rules数组中 rule ...