上传图片如果过大，等待时间过长体验不好，于是使用js压缩图片再上传，无关图片清晰度。
/**
* 压缩图片
* @param file 图片文件
* @param callback 回调函数，压缩完要做的事，例如ajax请求等。
*/
compressFile(file,callback){
let fileObj = file;
let reader = new FileReader()
reader.readAsDataURL(fileObj) //转base64
reader.onload = function(e) {
let image = new Image() //新建一个img标签(还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
let canvas = document.createElement('canvas'), // 新建canvas
context = canvas.getContext('2d'),
imageWidth = image.width / 4, //压缩后图片高度和宽度
imageHeight = image.height / 5,
data ='';
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg',0.1) // 0.1压缩至以前的0.1倍
let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 转成file
callback(files) // 回调
}
}
},
图片压缩完毕后就会毁掉callback函数
上传拿到文件进行判断大小是否需要压缩。需要压缩就使用压缩方法，通过回调函数进行操作。
这里需要特别注意，因为我使用的是iview，一直习惯了this方法调用函数，如果在这里函数调用函数的话，此this非彼this，所以就需要使用$this来进行接收外面的this，从而调用外面的uploads函数方法。
依赖阿里云的
封装密钥
进行图片上传
参数分别是文件名字，和文件
后面发现拍照文件如果原图是旋转的话，传上去的话也会是旋转的图片，这里就需要再将它转回来。
下载依赖exif.js
//获取图片属性
getPhotoOrientation(img,callback){
var orient;
EXIF.getData(img, function () {
orient = EXIF.getTag(img, 'Orientation');
callback(orient);
});
// callback(orient);
// this.orient=orient;
},
通过此方法可以获取图片的属性，根据orient值来得到是旋转多少
然后在画板图片绘制的时候进行判断，是否有旋转，如果有旋转再将他转正
js 导出pdf上传至oss_前端上传图片到oss 压缩图片后上传至oss（补充图片文件旋转90度问题）...
