vue+element-ui上传图片时压缩大小
第一种方法:需要安装一个模块
yarn add image-conversion --save
<el-upload
ref="upload"
:data="date"
:action="URL+'/api/post/file'"
:before-upload="beforeAvatarAUDIO3" //将用到此方法
:on-success="handleAvatarAUDIO3"
:on-error="error3"
:file-list="fileList"
>
第一种方法,需要引入imageConversion
import imageConversion from 'image-conversion'
beforeAvatarAUDIO3(file) {
//第一种方法开始-------------------------------------------------------------------------
return new Promise((resolve, reject) => {
let _URL = window.URL || window.webkitURL
// let isLt2M = file.size / 1024 / 1024 > 2 // 判定图片大小是否小于4MB
// 这里需要计算出图片的长宽
let img = new Image()
img.onload = function () {
file.width = img.width // 获取到width放在了file属性上
file.height = img.height // 获取到height放在了file属性上
let valid = img.width > // 图片宽度大于1280
// compressAccurately有多个参数时传入对象
if (valid) {
imageConversion.compressAccurately(file, {
size: , //图片大小压缩到1024kb
width:1280 //宽度压缩到1280
}).then(res => {
resolve(res)
})
} else resolve(file)
}
// 需要把图片赋值
img.src = _URL.createObjectURL(file)
})
//第一种方法结束---------------------------------------------------------------------------------
//第二种方法(改变图片分辨率大小实现压缩)-----------------------------------------------------------------
const _this = this
return new Promise(resolve => {
const reader = new FileReader()
const image = new Image()
image.onload = (imageEvent) => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
let width = image.width;
let height = image.height;
//等比缩放第一种 宽或高超过1280,进行等比例缩放
let rate = image.width / image.height
if (width > 1280 || height > 1280) {
width = rate > 1 ? 1280 : 1280 * rate;
height = rate < 1 ? 1280 : 1280 / rate;
} //等比缩放第二种 宽或高超过1280,等比缩放
canvas.width = width;
canvas.height = height;
context.clearRect(, , width, height);
context.drawImage(image, , , width, height);
const dataUrl = canvas.toDataURL(file.type);
const blobData = _this.dataURItoBlob(dataUrl, file.type);
resolve(blobData)
}
reader.onload = (e => { image.src = e.target.result; });
reader.readAsDataURL(file);
})
//第二种方法结束-----------------------------------------------------------------------------------
}, dataURItoBlob(dataURI, type) {
var binary = atob(dataURI.split(',')[]);
var array = [];
for(var i = ; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: type});
},
vue+element-ui上传图片时压缩大小的更多相关文章
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
随机推荐
- 20180610模拟赛T1——脱离地牢
Description 在一个神秘的国度里,年轻的王子Paris与美丽的公主Helen在一起过着幸福的生活.他们都随身带有一块带磁性的阴阳魔法石,身居地狱的魔王Satan早就想着得到这两块石头了,只要 ...
- STM32F10x之NVIC
转载自:https://www.jianshu.com/p/3aa5997fe794 1 异常类型 Cortex-M3内核具有强大的异常响应系统,它把能够打断当前代码执行流程的事件分为异常(excep ...
- 【转】linux 下清空或删除大文件的一些方法
原文:https://linux.cn/article-8024-1.html 在 Linux 终端下处理文件时,有时我们想直接清空文件的内容但又不必使用任何 Linux 命令行编辑器 去打开这些文件 ...
- 牛客NOIP暑期七天营-提高组1
牛客NOIP暑期七天营-提高组1 链接 A 边权可为0就排序建一条链子. 但是边权不为0 除了第一个有0的不行. x连向上一个比他小的数. 期间判断有无解. #include <bits/std ...
- 浅谈BST(二叉查找树)
目录 BST的性质 BST的建立 BST的检索 BST的插入 BST求前驱/后继 BST的节点删除 复杂度 平衡树 BST的性质 树上每个节点上有个值,这个值叫关键码 每个节点的关键码大于其任意左侧子 ...
- 从零和使用mxnet实现softmax分类
1.softmax从零实现 from mxnet.gluon import data as gdata from sklearn import datasets from mxnet import n ...
- K8s StatfulSet使用总结
StatefulSet:在1.3以前K8s中StatefulSet叫PetSet(宠物集),由此也可看出StatefulSet是关注个体,而非群体. StatefulSet要满足以下几点: 稳定且唯一 ...
- shell脚本显示字体颜色
shell脚本中echo显示内容带颜色显示,echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 例如: ec ...
- [300iq Contest 1-D]Dates
传送门 Description 每个妹子匹配一个时间区间,每个时间最多选择\(a_i\)个妹子,每个妹子有一个快乐值,最大化总快乐值 Solution 贪心,从大往小取,能取则取 判断是否可以有完美匹 ...
- awk简单应用
偷懒之人,必定会想方设法的走捷径.如果你想结束多个ID进程,有的人可能会说pkill 和killall.但是有时候不知道为啥 不生效啊 = =! 知道的可以告诉我.刚好最近在学awk 下面命令调用系统 ...