前端图片上传前压缩，vue版和JQ版

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yuyuking/article/details/79096138

刚开始的思路，拿到图片的files，获得图片的高度和宽度，生成canvas，canvas的宽高比和图片的宽高比一样，最后用img64 = c.toDataURL("image/jpeg", 0.7)，实现图频压缩，再把img64转为blob的数据传到后台。

后来发现在ios下，拍照上传的图片会旋转90度，查找资料得知ios手机竖着拍的拍照方向是6，而Android手机拍照方向为1。

后来找到了一个库来实现压缩

localResizeIMG

通过查看源代码，发现作者引入了一个exif.js 的库来实现旋转角度的纠正。

var image = new Image();
var vm = this;
var leng = file.length;
for(var i = 0; i < leng; i++) {
	lrz(file[i])
	 .then(function(rst) {
	 // 处理成功会执行
	var img = new Image();
	img.src = rst.base64;
	console.log(rst.base64)
	img.onload = function() {
		vm.images.push(rst.base64);
		vm.fourimages.push(rst.file)
	}
	console.log(rst.formData)
	console.log(rst.file)
	if(vm.images.length > 6) {
		vm.images.length = 6;
		vm.$dialog.toast({
			mes: '最多上传6张！',
			timeout: 1500,
			icon: 'error',
		});
	}
	})
	.catch(function(err) {
	// 处理失败会执行
	})
	.always(function() {
	// 不管是成功失败，都会执行
	});}

res.base64前台展示，res.file是blob格式数据，传到后台，用formdata上传数据，

我用的vue，上传代码：

var formData = new FormData()
for(var l = 0; l < this.$store.state.images.length; l++) {
	formData.append('images[]', this.$store.state.images[l], "img" + [l] + ".jpeg");
}
let config = {
	headers: {
		'Content-Type': 'multipart/form-data'
	}
}
this.$http.post('url', formData, config).then(function(res) {
	if(res.status === 200) {
		this.$dialog.loading.close();//提示和跳转，不用管
			this.$dialog.toast({
				mes: res.body.info,
				timeout: 1500,
				icon: 'success'
			});
		this.$router.push({
			path: '/'
		})
	}
})

JQ的上传代码，大同小异

var files = e.target.files

var oMyForm = new FormData();
oMyForm.append('avatar', rst.file);
$.ajax({
	type: "post",
	url: $host + "index.php?m=api&c=Personal&a=edit",
	data: oMyForm,
	processData: false, // 告诉jQuery不要去处理发送的数据  
	contentType: false, // 告诉jQuery不要去设置Content-Type请求头  
	success: function(res) {
		
	}
});