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

        },
相关推荐
前端_学习之路21 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_23 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说38 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css