本文实例为大家分享了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实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论