elementui上传图片功能(vue)

简介: elementui上传图片功能(vue)
            //文件上传
            fileUpload(e){
                let vm=this;
                if (e.target.files.length==0){
                    return false;
                }
                if(e.target.files[0].type!=='image/jpeg'&&e.target.files[0].type!=='image/png'){
                    this.$message.error('上传图片只能是JPG/PNG格式!');
                    return false
                }
                if (e.target.files[0].size/1024/1024>5){
                    this.$message.error('上传图片大小不超过5M');
                    return false
                }
                let option={file:e.target.files[0]}
                var reader = new FileReader();
                //files[0]对象是从input type=file中获取的file对象
                reader.readAsDataURL(option.file);
                //将file对象base64转码成功后进入
                reader.onload = function () {
                    //声明img标签,并将未压缩的图片赋值给src属性
                    var image = document.createElement('img')
                    image.setAttribute('src', this.result);
                    image.addEventListener('load', function () {
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var originWidth = this.width;
                        var originHeight = this.height;
                        // 最大尺寸限制
                        var maxWidth = 1500
                        // 目标尺寸
                        var targetWidth = originWidth, targetHeight = originHeight;
                        // 图片尺寸超过宽度400的限制
                        if (originWidth > maxWidth) {
                            // 更宽,按照宽度限定尺寸
                            targetWidth = maxWidth;
                            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                        }
                        // canvas对图片进行缩放
                        canvas.width = targetWidth;
                        canvas.height = targetHeight;
                        context.drawImage(this, 0, 0, targetWidth, targetHeight);
                        var dataBase = canvas.toDataURL(e.target.files[0].type);
                        // 将base64转换为files对象
                        var arr = dataBase.split(','),
                            mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]),
                            n = bstr.length,
                            u8arr = new Uint8Array(n);
                        while(n--){
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        let file=new File([u8arr], e.target.files[0].type=='image/jpeg'?'img.jpg':'img.png', {type:mime});
                        // 将files对象压缩为二进制
                        let formData = new FormData();
                        formData.append( 'file'  , file );
                        //ajax请求
                        vm.$api.upload.upload(( flag, result )=>{
                            if( flag ){
                                vm.form.Pic=result.data.Data.URL
                            }
                        }, formData );
                    });
                };
            }
相关文章
|
18天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
101 1
|
8天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
28 8
|
28天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
46 1
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1067 0
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
51 1