js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
图片上传目录
js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传html代码js代码html代码
<input type="file" name="file" class="file" id="uploadImg" multipleaccept="image/jpg, image/jpeg, image/png" onchange="uploadFileChang()">
js代码
function uploadFileChang(){// 获取文件var file = $("#uploadImg")[0].files[0]// 判断文件大小if (file.size > 1024 * 1024 * 1){// 图片大于1M进行压缩canvasDataURL(file, function (blob) {var newFile = new File([blob], file.name, {type: file.type})var isLt1M;if (file.size < newFile.size) {isLt1M = file.size} else {isLt1M = newFile.size}console.log(file.size)console.log(newFile.size)if (isLt1M / 1024 / 1024 > 1) {return alert('图片压缩之后还是大于1M，请压缩之后上传！');} else {if (file.size < newFile.size) {return uploadImage(file)}uploadImage(newFile)}})} else {// 图片小于1M直接上传uploadImage(file);}}// 图片压缩方法function canvasDataURL(file, callback) {var reader = new FileReader()reader.readAsDataURL(file)reader.onload = function (e) {const img = new Image()const quality = 0.1 // 图像质量const canvas = document.createElement('canvas')const drawer = canvas.getContext('2d')img.src = this.resultimg.onload = function () {canvas.width = img.widthcanvas.height = img.heightdrawer.drawImage(img, 0, 0, canvas.width, canvas.height)// convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);convertBase64UrlToBlob(canvas.toDataURL("image/jpeg", quality), callback);}}}// 上传图片方法function uploadImage(file) {var formData = new FormData();formData.append("file", file);$.ajax({type: 'POST',async: false,url: 'www......./api/upload/image',data: formData,contentType: false,processData: false, // 默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 falsesuccess: function (res) {if (res.Code == "0") {// 上传成功处理$("#uploadImg").val("")} else {$("#uploadImg").val("")alert('上传失败，请重新上传！')}},error: function () {$("#uploadImg").val("")alert('网络错误，请重试！')}});}
