Vue移动端实现图片上传及超过1M压缩上传


Posted in Javascript onDecember 23, 2019

本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下

1、实现效果

Vue移动端实现图片上传及超过1M压缩上传

2、代码

Html:

<div class="choosePic">
  <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}">
   <input type="file" class="uploads" @change="uploadserpRecords" accept="image/*" multiple >
   <img src="../../assets/home/ic_AddImage@3x.png" alt="" v-if="form.erpRecords == ''">
   <div v-if="form.erpRecords == ''">添加图片</div>
  </div>
</div>

Css:使用了less ,需要引入less,才能使用(npm install less less-loader --save)

.choosePic{
  margin: 0.64rem 0;
  .pics{
  background-position: center;
  background-size: cover;
  width: 15.1467rem;
  height: 5.5467rem;
  background-color: #F9F9F9;
  border: 2px solid #C3C3C3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #3DCA9A;
  font-weight: bold;
  border-radius: 0.213rem;
  >div{
   margin-left: 0.213rem;
   letter-spacing: 2px
  }
  .uploads{
   position: absolute;
   z-index: 99;
   left: 0;
   width: 99%;
   height: 5.5467rem;
   opacity: 0;
  }
  img{
   width: 1.4933rem;
   height: 1.4933rem;
  }

  }
 }

JS:

/**
 * 上传销售记录
 */
uploadserpRecords (e) {
 let file = e.target.files[0]
 if (file === undefined) {
 return
 }
 if (file.size / 1024 > 1025) { // 文件大于1M(根据需求更改),进行压缩上传
 that.photoCompress(file, { // 调用压缩图片方法
  quality: 0.2
 }, function (base64Codes) {
  // console.log("压缩后:" + base.length / 1024 + " " + base);
  let bl = that.base64UrlToBlob(base64Codes)
  // file.append('file', bl, 'file_' + Date.parse(new Date()) + '.jpg') // 文件对象
  that.uploadLice(bl) // 请求图片上传接口
 })
 } else { // 小于等于1M 原图上传
 this.uploadLice(file)
 }
}, 
/**
 * base64 转 Blob 格式 和file格式
 */
base64UrlToBlob (urlData) {
 let arr = urlData.split(','),
 mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头,并转化为byte
 bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
 n = bstr.length,
 u8arr = new Uint8Array(n)
 while (n--) {
 u8arr[n] = bstr.charCodeAt(n)
 }
 // 转blob
 // return new Blob([u8arr], {type: mime})
 let filename = Date.parse(new Date()) + '.jpg'
 // 转file
 return new File([u8arr], filename, {type: mime})
},
 /*
 压缩图片
 file:文件(类型是图片格式),
 obj:文件压缩后对象width, height, quality(0-1)
 callback:容器或者回调函数
*/
photoCompress (file, obj, callback) {
 let that = this
 let ready = new FileReader()
 /* 开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串. */
 ready.readAsDataURL(file)
 ready.onload = function () {
 let re = this.result
 that.canvasDataURL(re, obj, callback) // 开始压缩
 }
},
/* 利用canvas数据化图片进行压缩 */
/* 图片转base64 */
canvasDataURL (path, obj, callback) {
 let img = new Image()
 img.src = path
 img.onload = function () {
 let that = this // 指到img
 // 默认按比例压缩
 let w = that.width,
  h = that.height,
  scale = w / h
 w = obj.width || w
 h = obj.height || (w / scale)
 let quality = 0.2 // 默认图片质量为0.7
 // 生成canvas
 let canvas = document.createElement('canvas')
 let ctx = canvas.getContext('2d')
 // 创建属性节点
 let anw = document.createAttribute('width')
 anw.nodeValue = w
 let anh = document.createAttribute('height')
 anh.nodeValue = h
 canvas.setAttributeNode(anw)
 canvas.setAttributeNode(anh)
 ctx.drawImage(that, 0, 0, w, h)
 // 图像质量
 if (obj.quality && obj.quality >= 1 && obj.quality < 0) {
  quality = obj.quality
 }
 // quality值越小,所绘制出的图像越模糊
 let base64 = canvas.toDataURL('image/jpeg', quality)
 // 回调函数返回base64的值
 callback(base64)
 }
},
// 返回file文件,调用接口执行上传
uploadLice (file) {
 console.log(file)
 uploadLog(file, (data) => {
 this.form.operatingLicense = data
 console.log(data)
 })
},

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript AutoScroller 函数类
May 29 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
微信小程序实现签字功能
Dec 23 #Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
vue实现拖拽效果
Dec 23 #Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
You might like
php 猴子摘桃的算法
2017/06/20 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python对切片命名的实现方法
2018/10/16 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
基于python实现操作redis及消息队列
2020/08/27 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
个人教师自我评价范文
2013/12/02 职场文书
反对邪教标语
2014/06/30 职场文书
党在我心中演讲稿
2014/09/02 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL