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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
使用php清除bom示例
2014/03/03 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python生成pdf文件的方法
2014/08/04 Python
Python算术运算符实例详解
2017/05/31 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Django model反向关联名称的方法
2018/12/15 Python
python 多线程串行和并行的实例
2019/02/22 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
试用期自我鉴定范文
2014/03/20 职场文书
超市商业计划书
2014/05/04 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
python 中yaml文件用法大全
2021/07/04 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS