compressImg(file) {
var files
var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
var read = new FileReader()
read.readAsDataURL(file)
return new Promise(function(resolve, reject) {
read.onload = function(e) {
var img = new Image()
img.src = e.target.result
img.onload = function() {
// 默认按比例压缩
var w = this.width
var h = this.height
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var base64
// 创建属性节点
canvas.setAttribute('width', w)
canvas.setAttribute('height', h)
ctx.drawImage(this, 0, 0, w, h)
if (fileSize < 1) {
// 如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1)
} else if (fileSize > 1 && fileSize < 2) {
// 如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5)
} else {
// 如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2)
}
// 回调函数返回file的值(将base64编码转成file)
resolve(base64)
}
}
})
},
getFile(file, fileList) {
// console.log(file)
const isImage = file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg'
const isLt5M = file.size < 1024 * 1024 * 10
if (!isImage) {
this.$message.error('上传只能是png,jpg,jpeg格式!')
}
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!')
}
if (isImage && isLt5M) {
this.compressImg(file.raw).then(res => {
this.reses = res
this.$emit('uploadpic', res)
debugger
})
} else {
fileList.splice(-1, 1)
}
},