vue+vant 上传图片压缩

最新推荐文章于 2024-07-15 17:59:29 发布

0?0

最新推荐文章于 2024-07-15 17:59:29 发布

阅读量846

点赞数

分类专栏： Vue2学习记录

本文链接：https://blog.csdn.net/weixin_42301962/article/details/107543452

版权

在手机端项目中，商家上传产品图片时，为优化页面加载速度，需要对大图进行压缩处理。本文将记录使用Vue.js结合Vant组件库实现图片上传并压缩的解决方案。

摘要由CSDN通过智能技术生成

最近有个手机端商家上传产品的项目，商城的操作几乎全在手机端完成。。。。真的是烧脑，都掉头发。。。。先记录一下吧，上传大图不压缩，页面太慢了

 dataURLtoFile (dataurl, filename) { // 将base64转换为file文件
   let arr = dataurl.split(',');
     let mime = arr[0].match(/:(.*?);/)[1];
     let bstr = atob(arr[1]);
     let n = bstr.length;
     let u8arr = new Uint8Array(n);
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new File([u8arr], filename, {type: mime});
 },

			let selectFile = [];
            let formData =  new FormData();
            if(file.file.size >1048576){  //大于1M的图片压缩
                let canvas = document.createElement('canvas'); // 创建Canvas对象(画布)
                let context = canvas.getContext('2d');
                let img = new Image();
                img.src = file.content;// 指定图片的DataURL(图片的base64编码数据)
                canvas.width = img.width/4;