antdv的Upload组件实现前端压缩图片并自定义上传功能
Ant Design of Vue的Upload组件有几个重要的api属性:
beforeUpload
: 上传文件之前的钩子函数,支持返回一个Promise对象。
customRequest
: 覆盖组件默认的上传行为,实现自定义的上传请求。
功能实现原理
在上传图片前获取该图片的文件流(beforeUpload
中获取),对这个文件流进行压缩操作,再将压缩后的文件流传过去(resolve(newFile)
),最后进行自定义的上传请求(customRequest
中实现)。
图片预览方式
前端本地图片的预览则可以选择blob
或者base64
的方式,本文推荐使用blob
方式来预览图片的文件流。
部分代码
html
<template>
<div>
<a-spin :spinning="isShowSpinning">
<img
v-if="imageUrl"
:src="data:imageUrl"
style="width: 200px; height: 200px; margin-right: 10px;"
/>
<a-upload
accept="image/*"
:beforeUpload="beforeImageUpload"
:customRequest="customImageRequest"
>
<a-button type="primary">
<a-icon type="upload" />上传
</a-button>
</a-upload>
</a-spin>
</div>
</template>
api
import request from '@/utils/request'
const api = {
uplodBackName: '/biz/uplodBackName'
}
export function getUplodBackName (parameter) {
return request({
url: api.uplodBackName,
method: 'post',
// 传输文件流需要单独设置请求头
headers: {
'Content-Type': 'multipart/form-data'
},
data: parameter
})
}
js
<script>
import { getUplodBackName } from '@/api/biz/manage'
export default {
components: {},
data () {
return {
imageUrl: '',
isShowSpinning: false
}
},
methods: {
// 上传图片前的钩子函数
beforeImageUpload (file, fileList) {
return new Promise(async (resolve, reject) => {
if (!file.type.includes('image')) {
this.$message.warning('请上传图片')
reject(new Error('请上传图片'))
return
}
this.isShowSpinning = true
const newFile = await this.compressImg(file)
resolve(newFile)
})
},
// 自定义的上传请求
customImageRequest (info) {
const { file } = info
// blob方式预览图片
this.imageUrl = window.URL.createObjectURL(file)
// 组装数据
const formData = new FormData()
formData.append('files', file)
// 发送请求
getUplodBackName(formData).then(res => {
this.$message.success('上传成功')
}).catch(() => {
this.$message.warning('上传失败')
}).finally(() => {
this.isShowSpinning = false
})
},
// base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
// 图片压缩函数
compressImg (file) {
const that = this
var files
var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
var read = new FileReader()
read.readAsDataURL(file)
return new Promise(function (resolve, reject) {
read.onload = function (e) {
var img = new Image()
img.src = e.target.result
img.onload = function () {
// 默认按比例压缩
var w = this.width
var h = this.height
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var base64
// 创建属性节点
canvas.setAttribute('width', w)
canvas.setAttribute('height', h)
ctx.drawImage(this, 0, 0, w, h)
if (fileSize < 1) {
// 如果图片小于一兆 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5)
} else if (fileSize > 1 && fileSize < 2) {
// 如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5)
} else {
// 如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2)
}
// 回调函数返回file的值(将base64编码转成file)
files = that.dataURLtoFile(base64, file.name) // 如果后台接收类型为base64的话这一步可以省略
resolve(files)
}
}
})
}
}
}
</script>
效果预览
压缩效果
根据实测,5MB
的图片可以压缩到200KB
,画质上,肉眼观察基本不变。
如有错误,请多指教,谢谢!
antdv的Upload组件实现前端压缩图片并自定义上传功能的更多相关文章
- AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为
本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 我在上一篇文章<AntD框架的upload组件上传图片时使用customRequest方法 ...
- 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)
web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...
- uni-app实现图片和视频上传功能
使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写, 1.页面布局 通过 ...
- javascript压缩图片无刷新上传
首先要说明,该方式我没有实现成功,主要问题点是压缩后能拿到压缩后图片地址,确不知道怎么上传上去,如果有哪位大牛可以指点一二,万分感谢. 图片压缩代码: compress: function(sourc ...
- JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能
一.去官网下载webuploader文件上传插件 https://fex.baidu.com/webuploader/ 下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的 ...
- android之使用GridView+仿微信图片上传功能
由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- 微信小程序实现图片上传功能
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
- vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]
后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...
随机推荐
- MapReduce的工作流程
MapReduce的工作流程 1.客户端将每个block块切片(逻辑切分),每个切片都对应一个map任务,默认一个block块对应一个切片和一个map任务,split包含的信息:分片的元数据信息,包含 ...
- (buuctf) - pwn入门部分wp - rip -- pwn1_sctf_2016
[buuctf]pwn入门 pwn学习之路引入 栈溢出引入 test_your_nc [题目链接] 注意到 Ubuntu 18, Linux系统 . nc 靶场 nc node3.buuoj.cn 2 ...
- Camtasia中对录制视频进行编辑——音效
市场上有很多的视频处理软件,形形色色的软件往往会使人眼花缭乱,而对于那些短视频的制作者来说,拥有一款好的视频处理软件会让自己的视频收获更多的点赞.那么今天我便给大家推荐一款同时具有录屏和编辑视频功能的 ...
- 如何用Folx的浏览器集成功能设置捕获类型
Folx的浏览器集成功能,可将Folx的下载功能添加到浏览器的上下文菜单(也就是右键快捷菜单)中,方便用户使用Folx捕获页面中的下载链接,并创建下载任务. 那么,用户需要进行哪些设置才能使用Folx ...
- 三大Mac清理工具实用性测评,哪款好用?
相信大多数MAC用户都较为了解,Mac虽然有着许多亮点的性能,但是让用户叫苦不迭的还其硬盘空间小的特色,至于很多人因为文件堆积以及软件缓存等,造成系统空间内存不够使用的情况.于是清理工具就成为了大多数 ...
- 能否安装 CrossOver 上没有的软件
系统兼容软件CrossOver可以像虚拟机一下帮助我们在Mac或者Linux上运行Windows应用程序,快速实现跨平台文件互通,所以我们也称它为类虚拟机. 不需要安装Windows操作系统的Cros ...
- Netty源码分析之ByteBuf(二)—内存分配器ByteBufAllocator
Netty中的内存分配是基于ByteBufAllocator这个接口实现的,通过对它的具体实现,可以用来分配我们之前描述过的任意类型的BytebBuf实例:我们先看一下ByteBufAllocator ...
- SRX_Test_2_sound
声音(sound) [问题描述] 雅礼中学的校门口在修建地铁,而由此带来的噪音问题让周边的居民困扰不已.环保局正在研究 一项评估模型,可以定量评价噪音的危害程度.这项评估模型是这样的:将每一条街道视作 ...
- Codeforces Round #488 by NEAR (Div. 2)
A 开个桶记录是否出现即可. 时间复杂度 \(O\left(n+m\right)\). B 按能力值从小到大依次加入,然后维护前 \(k\) 大的金币数即可. 时间复杂度 \(O\left(n\log ...
- 【应用服务 App Service】解决无法从Azure门户SSH登录问题
问题描述 中国区的Azure App Service(应用服务)已经支持创建Docker并选择Linux环境.在使用中,我们可以继续通过kudu站点的方式登录查看站点的一些日志及部署文件.它的登录方式 ...