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 相关文章推荐
javascript对JSON数据排序的3个例子
Apr 12 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
使用js画图之画切线
Jan 12 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python生成器generator用法实例分析
2015/06/04 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python如何实现视频转代码视频
2019/06/17 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
食品安全检查制度
2014/02/03 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
团结友爱主题班会
2015/08/13 职场文书
Python WSGI 规范简介
2021/04/11 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android