如何使用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,需要 ...

随机推荐

pdf导出预览、直接打印、打印加预览
前台: var xueurl = "fileFormatController.do?getXbDetail_print&id=&codes=" + rowsData ...
优化多if和else语句
可以利用对象来进行映射比如 let type = this.radio_value if (type === 'whole') { this.time_value = [] } else if (t ...
webpack 5 配置babel-loader babel7
1.安装Balel目的: 在webpack中默认只能处理部分 ES6的新语法,一些更高级的ES6或ES7的语法,webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack ...
固定代码格式化程序插件-Prettier JetBrains
基本使用使用npm install prettier --save-dev为您的项目添加更漂亮或全局安装使用Prettier选择要格式化的代码或文件使用"Reformat with P ...
关于WPF的圆角
失败案例 <Border CornerRadius="3" Width="100" Height="100"> <Stac ...
【Word】通配符和特殊字符
[Word]通配符和特殊字符 ^p 换行符正则表达式使用\转义,用于[]等参考资料 Word通配符怎么用?使用Word通配符的方法
[转]C#的反射
一.反射简介 1.1.反射的说明反射:指程序可以访问.检测和修改它本身状态或行为的一种能力(即:审查元数据并收集关于它的类型信息的能力). ①元数据(编译以后的最基本数据单元:指程序和程序类型本身的 ...
HTML中javascript的<script>标签使用方法详解
只要一提到把JavaScript放到网页中,就不得不涉及Web的核心语言--HTML.在当初开发JavaScript的时候,Netscape要解决的一个重要问题就是如何做到让JavaScript既能与 ...
Google colab防断联
(1)进入Colab的notebook界面,按快捷键F12,打开开发者模式或者右键检查进入,选择console (2)复制并运行代码 function ClickConnect(){ console. ...
py09函数简介
函数的返回值 # def func():# return 'asfjsfda'# res = func()# print(res) # 函数内要想返回给调用者值必须用关键字return"& ...

如何使用Antd的图片上传组件

如何使用Antd的图片上传组件的更多相关文章

随机推荐

热门专题