侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   292

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

1、实现效果

2、代码

Html:

添加图片

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实战教程》

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

您可能感兴趣的文章:

  • 使用Vue实现图片上传的三种方式
  • Vue axios 中提交表单数据(含上传文件)
  • vue实现文件上传功能
  • 基于VUE选择上传图片并页面显示(图片可删除)
  • vue.js 上传图片实例代码
  • Vue.js 2.0 移动端拍照压缩图片上传预览功能
  • vue中使用input[type="file"]实现文件上传功能
  • vue项目中使用axios上传图片等文件操作
  • Vue上传组件vue Simple Uploader的用法示例
  • vue使用axios实现文件上传进度的实时更新详解


  • 上一条:
    微信公众号点击菜单即可打开并登录微站的实现方法
    下一条:
    微信公众号用户与网站用户的绑定解决方案分析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 在go语言中使用GoPDF包把html生成PDF文件示例(0个评论)
    • 在go语言中创建和解析(读取)符号链接示例(0个评论)
    • ubuntu 22.04系统中报错:Python 3.6 is no longer supported by the Python core team...解决方式(0个评论)
    • Laravel 10.4版本发布(0个评论)
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客