vue简单上传图片，压缩图片功能实现（js原生通用）

可以先看 只有上传图片的

js完整demo  https://blog.csdn.net/qq_42221334/article/details/84827369

vue 完整demo  https://blog.csdn.net/qq_42221334/article/details/93198417

参考上传图片 添加了canvas 方法压缩图片&＃xff0c;判断图片宽度大于1000时 进行压缩

methods: {//传图xmTanUploadImg(){var that&＃61;thisvar obj&＃61;document.getElementById("xdaTanFileImg");//获取元素的domvar file &＃61; obj.files[0]; var reader &＃61; new FileReader();reader.onload &＃61; function (e) {// 此处 e.target.result 能获取图片 不压缩时直接赋值给图片的src即可//此处为压缩图片方法let image &＃61; new Image() //新建一个img标签&＃xff08;还没嵌入DOM节点)image.src &＃61; e.target.resultimage.onload &＃61; function() {var canvas &＃61; document.createElement(&＃39;canvas&＃39;), context &＃61; canvas.getContext(&＃39;2d&＃39;);var x&＃61;image.width/1000; //压缩倍数if(image.width>1000){var imageWidth &＃61; image.width / x; //压缩后图片的大小var imageHeight &＃61; image.height / x;}else{var imageWidth &＃61; image.width / 1; //不进行压缩大小var imageHeight &＃61; image.height / 1;}var data &＃61; &＃39;&＃39;canvas.width &＃61; imageWidthcanvas.height &＃61; imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data &＃61; canvas.toDataURL(&＃39;image/jpeg&＃39;)//压缩完成 var img &＃61; document.getElementById("avarimgs"&＃43;num);//获取图片idimg.src &＃61; data;//给图片src路径赋值//此处为上传图片到服务器 所传图片值为datavar baseUrl &＃61; process.env.API_ROOT;var formData &＃61; new FormData();formData.append("source", 3);formData.append("base64_image", data);axios.post(baseUrl &＃43; "apiyd/base/uploadBase64ImgInfo", formData) .then(res &＃61;> {if (res.data.code &＃61;&＃61; 1000) {that.formList.company_pics&＃61;res.data.data.image_url} else {$.toast(res.data.message, "text");}});}}reader.readAsDataURL(file)},
}

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1