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

本⽂实例为⼤家分享了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学习教程请阅读专题

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。