您的位置：首页 > Web前端 > Vue.js

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

2019-12-24 12:11 766 查看

本文实例为大家分享了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
 = 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 上传

相关文章推荐

新的分享

章节导航