vue 前端等比例压缩图片(再转换成文件后上传后端)

前端压缩图片总的来说还是转base64 然后等比例放小宽和高 这个是上次压缩图片的一个扩展

压缩完之后 再将base64 转成blob再转成文件然后再上传 一生要强的前端崽子(后端不支持base64上传) 自己改吧改吧

javascript 复制代码
 // 图片上传
        async changePic(e) {
            this.isshangchuantupian=true
            this.$message.warning('图片资源正在压缩...')
            // 获取图片数据  
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            let ctempfile
            let _that = this
            reader.onload = await function (event) {
                // 压缩图片  
                var img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var width = img.width
                    var height = img.height
                    if (Math.max(width, height) > _that.maximg) {
                        if (width > height) {
                            canvas.width = _that.maximg;
                            canvas.height = _that.maximg * height / width
                        } else {
                            canvas.height = _that.maximg
                            canvas.width = _that.maximg * width / height
                        }
                    } else {
                        canvas.width = width;
                        canvas.height = height;

                    }
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据  
                    var blob = dataURLToBlob(dataUrl); // 将压缩后的图片数据转换为Blob对象  
                    ctempfile = new File([blob], file.name, { type: 'image/jpeg' }); // 将Blob对象封装为File对象  
                    //console.log(ctempfile)
                    let formData = new FormData()
                    // for (let i = 0; i < fileList.length; i++) {
                    //formData.append('xxxx', fileList[i])
                    //}
                    formData.append('update_image', ctempfile)
                    http
                        .post('服务器地址', formData)
                        .then(res => {
                            //console.log(res.data.update_image)
                            if (res.data.xxxx) {
                              
                                _that.isshangchuantupian=false

                            } else {
                                _that.$message({
                                    message: '图片上传失败:',
                                    type: 'error'
                                })
                            }
                        })
                        .catch(err => {
                            console.log(err)
                        })
                };
            };
            // 将Base64编码的图片数据转换为Blob对象  
            function dataURLToBlob(dataUrl) {
                var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            }
            //let fileList = e.target.files

        },
相关推荐
全宝12 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele36 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮43 分钟前
【无标题】
开发语言·前端·javascript
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端