最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件

1. 使用方法

引入组件然后配置一下即可使用,配置项包括

  • defaultImageList,需要回显的图片(必传),[ url1, url2 ]
  • fileTypeList ,文件格式(可选),默认不做限制
  • limitSize ,单个图片大小限制(可选),单位MB
  • limitNum ,上传图片个数限制(可选),默认200个
  • multiple ,是否可以多选(可选),默认否
  • disabled ,是否禁用(可选),默认否
  1. 引用组件
<template>
<div>
<b-upload-image-base64 ref="bUploadImageBase64" :limitNum="1" @change="change" :defaultImageList="data" />
</div>
</template>
<script>
import bUploadImageBase64 from '@/components/BUploadImageBase64'
export default {
components: {
bUploadImageBase64
},
data() {
return {
data: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
defaultImageList: []
};
},
methods: {
change(e) {
console.log('e', e)
}
},
};
</script>
<style> </style>
  1. 组件
<template>
<div class="clearfix">
<a-upload
:beforeUpload="beforeImageUpload"
list-type="picture-card"
:file-list="imageList"
:multiple="multiple"
:disabled="disabled"
@change="handleImageChange"
@preview="handlePreview"
:custom-request="customRequest"
>
<div v-if="imageList.length < limitNum && !disabled">
<a-icon type="plus"/>
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal>
</div>
</template>
<script>
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
})
} export default {
props: {
defaultImageList: {
type: Array,
default: function() {
return []
},
required: true
},
fileTypeList: {
type: Array,
default: function() {
return []
},
required: false
},
limitSize: {
type: Number,
default: 5,
required: false
},
limitNum: {
type: Number,
default: 20,
required: false
},
multiple: {
type: Boolean,
default: false,
required: false
},
disabled: {
type: Boolean,
default: false,
required: false
}
},
data() {
return {
previewVisible: false,
previewImage: '',
imageList: []
}
},
watch: {
defaultImageList(newVal) {
this.imageList = this.handleData(newVal)
}
},
created() {
this.imageList = this.handleData(this.defaultImageList)
},
methods: {
// ---------------------------------------------img--start
beforeImageUpload(file) {
return new Promise((resolve, reject) => {
if (!this.fileTypeList) {
const index = this.fileTypeList.indexOf(file.type)
if (index > 0) {
this.$message.error(`您只能上传${this.fileTypeList[index]}文件`)
}
}
const limitSize = file.size / 1024 / 1024 < this.limitSize
if (!limitSize) {
this.$message.error(`文件大小不能大于${this.limitSize}MB`)
return reject(new Error(`文件大小不能大于${this.limitSize}MB`))
}
return resolve(true)
})
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.previewImage = file.url || file.preview
this.previewVisible = true
},
handleCancel() {
this.previewVisible = false
},
customRequest({ action, file, onSuccess, onError, onProgress }) {
new Promise(resolve => {
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = () => {
let index = {
uid: this.genId(5),
name: file.name,
status: 'done',
url: fileReader.result
}
this.imageList = [...this.imageList.filter(item => item.status === 'done'), index]
this.$message.success('文件上传成功!')
this.handleChange()
resolve(fileReader.result)
}
})
},
handleImageChange(info) {
let fileList = [...info.fileList]
this.imageList = fileList
this.handleChange()
},
handleChange() {
let index = this.imageList.filter(item => item.url).map(item => {
return item.url
})
this.$emit('change', index ? index : [])
},
genId(length) {
return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)
},
handleData (list) {
return list.map(item => {
let index = this.genId(5)
return {
uid: index,
name: index,
status: 'done',
url: item
}
})
}
// ---------------------------------------------img--end
}
}
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
} .ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>

2. 封装遇到的坑

因为是自己实现上传逻辑需要使用属性:custom-request="customRequest"

组件的运行顺序是beforeImageUpload->customRequest

  1. 一开始的校验需要写在beforeImageUpload中,主要是验证文件格式,文件大小
  2. 然后进入自定义的上传逻辑,这里主要是读取图片为base64,然后放入回显的数组中,这样组件就可以显示上传的图片了,此时还需要回调base64
  3. handleChange方法主要是删除图片使用,需要过滤出非undefined的,剩余的图片并回传base64

【antd Vue】封装upload图片上传组件(返回Base64)的更多相关文章

  1. vue.js框架图片上传组件

    html: <div id="app"> <div class="hello"> <div class="upload& ...

  2. vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽

    最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...

  3. vue图片上传组件

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

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

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

  5. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

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

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

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

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

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

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

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

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

随机推荐

  1. 以“有匪”为实战案例,用python爬取视频弹幕

    最近腾讯独播热剧"有匪"特别火,我也一直在追剧,每次看剧的时候都是把弹幕开启的,这样子看剧才有灵魂呀.借助手中的技术,想爬取弹幕分析下这部电视剧的具体情况和网友们的评论!对于弹幕的 ...

  2. 一键安装KMS服务

    本文转载于 秋水逸冰 » 一键安装 KMS 服务脚本 KMS,是 Key Management System 的缩写,也就是密钥管理系统.这里所说的 KMS,毋庸置疑就是用来激活 VOL 版本的 Wi ...

  3. 保姆级教程!使用k3d实现K3s高可用!

    你是否曾经想尝试使用K3s的高可用模式?但是苦于没有3个"备用节点",或者没有设置相同数量的虚拟机所需的时间?那么k3d这个方案也许你十分需要噢! 如果你对k3d尚不了解,它的名字 ...

  4. Python3实现短信轰炸机

    短信轰炸机的基本原理:利用某些限制不严格的网站短信注册接口,用Python模拟请求,传入被炸人手机号码,实现轰炸 实现方式:利用requests模块.time模块.完成请求模拟 模块安装: 在终端窗口 ...

  5. 在docker容器中使用cplex-python37

    技术背景 线性规划是常见的问题求解形式,可以直接跟实际问题进行对接,包括目标函数的建模和各种约束条件的限制等,最后对参数进行各种变更,以找到满足约束条件情况下可以达到的最优解.Cplex是一个由IBM ...

  6. Android学习之 AlertDialog

    •AlertDialog简介 AlertDialog 可以在当前界面弹出一个对话框: 这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力: 因此, AlertDialog 一般用于提示 ...

  7. DAOS 分布式异步对象存储|故障模型

    DAOS 依靠大规模分布式单端口存储.因此,每个 Target 实际上都是一个单独的失败点. DAOS 通过在不同的容错域中提供 Target 间的冗余来实现数据和元数据的可用性和持久性.DAOS 内 ...

  8. redis的主从复制(哨兵模式)

    p.p1 { margin: 0; font: 10px ".SF NS Text" } Master以写为主,Slave以读为主 读写分离 容灾恢复 一.一主多从 配置文件修改: ...

  9. BUAA_2020_OO_UNIT2_REVIEW

    OO第二单元总结 1. 设计策略 总的来说,三次作业没有大的重构,都是使用了多线程进行电梯调度,输入线程和运行线程分离,主要的不同在于三次电梯调度器线程的数量有所不同,第一次为一个,第二次为n个,第三 ...

  10. shell脚本 5 sed和awk

    文本处理三剑客 在 Shell 下使用这些正则表达式处理文本最多的命令有下面几个工具: 命令 描述 grep 默认不支持扩展表达式,加-E 选项开启 ERE.如果不加-E 使用花括号要加转义符\{\} ...