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的图片上传组件的更多相关文章

  1. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  2. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  3. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  4. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  5. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  6. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

  7. 封装react antd的upload上传组件

    上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...

  8. 图片上传组件webuploader

    前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net  MVC来做的): 执行顺序:(get)Record/Add——A ...

  9. vux-uploader 图片上传组件

    1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...

  10. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

随机推荐

  1. 判断python socket服务端有没有关闭的方法

    通过 getattr(socket, '_closed') 的返回值可以判断服务端的运行状态. True 是关闭状态,False 是运行中. import socket ip = 'localhost ...

  2. Java笔记_构造方法/构造器

    构造方法/构造器(constructor)   怎么来的?之前在创建对象时,是先把一个对象创建好后,再给这个对象的属性赋值,如果现在要求在创建一个对象时,就直接指定这个对象的属性,该怎么做?此时就可以 ...

  3. Firefox彻底禁用自动更新提示

    实验版本:96 安装目录下新建文件夹:distribution 新建文件:policies.json 文件内容为: { "policies": { "DisableApp ...

  4. PHP-循环文件夹-yield-生成器

    <?php define(DS, DIRECTORY_SEPARATOR); function gen_dir($path='.'){ $c_dir = opendir($path); whil ...

  5. 莫凡Python 3

    莫凡Python 3 新建模板小书匠 CNN 卷积神经网络 参考资料 https://morvanzhou.github.io/tutorials/machine-learning/keras/2-3 ...

  6. VMware Workstation 未能启动VMware Authentication Service

    (1)今天像往常一样打开vmware启动虚拟机,但是弹出个框,显示VMware Workstations 未启动VMware Authorization Service,让我尝试手动启动. (2)Wi ...

  7. socket-消息发送实战

    1. 函数用法 Handle.oobtainMessage(int what ,int arg1,int arg2,object obj)  2. 消息内容  3. 代码组合(隐私模式开关) 3.1 ...

  8. 第二周day6

    第二周day6,星期六 所花时间:0 代码量:0 搏客量:1 了解到的知识点:多锻炼.

  9. Linux 系统镜像分类和包管理工具

    查看系统版本 cat /proc/version 可以看到如下返回,Linux是RedHat系统 Linux version 4.18.0-372.9.1.el8.x86_64 (mockbuild@ ...

  10. twenty two

    打包处理less文件 1,运行npm i less-loader@10.0.1 less@4.1.1 -D 2, 在webpack.config.js的module->rules数组中 rule ...