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 网站地址:我的 ...
随机推荐
- 08-人脸识别-FaceNet-classify.py代码阅读(说明见注释)
"""An example of how to use your own dataset to train a classifier that recognizes pe ...
- [Algorithm] 202. Happy Number
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- Spring Cloud微服务安全实战_3-3_API安全之流控
这几篇将API安全的 流控.认证.审计.授权 简单的过一遍,对这些概念先有个初步印象.后边还会详细讲解. 本篇说API安全之流控~第一印象. 一.概念 流控,流量控制,只放系统能处理的请求的数量过去, ...
- 【AGC009C】Division into Two
[AGC009C]Division into Two 题面 洛谷 题解 首先有一个比较显然的\(n^2\)算法: 设\(f_{i,j}\)表示\(A\)序列当前在第\(i\)个,\(B\)序列当前在第 ...
- 华为鸿蒙OS发布!方舟支持混合编译,终将可替换安卓?
前言 有关于鸿蒙的消息之前也有说过,就在昨天下午,华为举行了2019开发大会,正式推出了鸿蒙os系统(Harmony).其相关负责人表示,也是基于微软内核的全场景分布式OS 鸿蒙凭借微内核的优势, ...
- 记一次Pr中视频蜜汁卡顿往复和解决方法
目录 问题 换素材的起因 灵异素材 无端联想 解决 问题 换素材的起因 本来视频剪了一晚剪完了,导出一看,好家伙,糊到上世纪.原来素材的像素大小都没法看,这视频素材我是从别人U盘拷过来的,可他竟然是用 ...
- linux quota磁盘限额,引发的rename系统调用 errno:18 - Invalid cross-device link
起因: log4j日志滚动失败,debug发现jvm调用native方法rename失败,也就是系统调用rename失败. 自己写c程序系统调用rename,证实确实是这个问题. 日志打在容器里,日志 ...
- 【2019年05月13日】A股ROE最高排名
个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名. 兰州民百(SH600738) - 滚动ROE:86.45% - 滚 ...
- Visual Studio报错/plugin.vs.js,行:1074,错误:缺少标识符、字符串或数字
C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\PrivateAssemblies/plugin. ...
- nginx开启gzip的方法
nginx开启gzip的方法 1.vi打开Nginx配置文件 <pre>vi /usr/local/nginx/conf/nginx.conf</pre> 2.找到如下一段,进 ...