Vue移动端实现图片上传及超过1M压缩上传
程序员文章站
2022-04-09 16:25:11
本文实例为大家分享了vue移动端实现图片上传及超过1m压缩上传的具体代码,供大家参考,具体内容如下
1、实现效果
2、代码
html:
本文实例为大家分享了vue移动端实现图片上传及超过1m压缩上传的具体代码,供大家参考,具体内容如下
1、实现效果
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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue点击按钮动态创建与删除组件功能
下一篇: vue实现拖拽效果