vue-cli + ElementUI 裁切上传图片自定义接口

项目需要引入 vue-cropperjs npm 运行

 cnpm install cropper js --save

1、页面中HTML

//触发HTML 未定义css
<div class="crop-demo"> <div v-if="imageUrl==''"  class="pre-img">（文字提示）<input class="crop-input" id="file_uploade" type="file" name="image" accept="image/*" @change="setImage"/></div><img v-if="imageUrl!=''" :src="data:imageUrl" class="pre-img"><input class="crop-input"  v-if="imageUrl!=''" type="file" name="image" accept="image/*" @change="setImage"/>  //如果已经上传显示这个框定位到图片上方则可以实现点击图片重新上传
</div>

2、裁切弹窗

<el-dialog title="裁剪图片（鼠标滚轮缩放，可拖动裁切）" :visible.sync="dialogVisible" width="30%"><vue-cropper ref='cropper' :aspectRatio="option.aspectRatio" :viewMode="option.viewMode" :dragMode="option.dragMode" :cropBoxResizable="option.cropBoxResizable" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" style="width:100%;height:300px;"></vue-cropper><span slot="footer" class="dialog-footer"><el-button @click="cancelCrop">取 消</el-button><el-button type="primary" @click="uploadImg">确 定</el-button></span>
</el-dialog>

3、在页面中引入

import VueCropper  from 'vue-cropperjs';

4、生命周期中添加引入

components: { VueCropper
},

4、data中定义需要用到的方法(整理可能有遗漏会报错)

imgSrc: '',
action:'',
cropImg: '',
cropper:'',
param:"",//表单要提交的参数
dialogVisible:false,
imageUrl:'',//上传成功返回的图片放在这
option: {img: '',outputSize:1, //剪切后的图片质量（0.1-1）full: false,//输出原图比例截图 props名fulloutputType: 'png',cropBoxResizable:false, //是否可以重置canMove: true,dragMode:'move',original: false,canMoveBox: true,autoCrop: true,autoCropWidth: 260,autoCropHeight: 174,minContainerWidth:260,minContainerHeight:174,minCropBoxWidth:260,minCropBoxHeight:174,minCanvasWidth:260,minCanvasHeight:174,aspectRatio:2.21, //长宽比例fixedBox: true, viewMode:1,
},

5、methods中定义方法（未精简代码）

setImage(e){ var that = this;const file = e.target.files[0]; let url = window.URL || window.webkitURL;let img = new Image();//手动创建一个Image对象img.src = url.createObjectURL(file);//创建Image的对象的urlconst isLt2M = file.size / 1024 / 1024;  //获取图片大小img.onload = function () {//console.log('height:'+this.height+'----width:'+this.width)if(this.height<320 || this.width < 720){that.$message.error('图片太小，请上传至少720*320的图片进行裁切!');} else if(isLt2M>1){that.$message.error('上传图片大小不能超过1MB!');that.dialogVisible = false;} else{ if (!file.type.includes('image/')) {return;//console.log(2)}const reader = new FileReader();reader.onload = (event) => {that.dialogVisible = true;that.imgSrc = event.target.result;that.$refs.cropper && that.$refs.cropper.replace(event.target.result);};reader.readAsDataURL(file);}}
},
cropImage () {   //裁切//console.log(2)this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},
cancelCrop(){ //关闭 this.dialogVisible = false;this.cropImg = '';
},
uploadImg(){ let that = this,Img = new Image();Img.src = this.cropImg;Img.onload = function(){let w = this.naturalWidth,h = this.naturalHeight,resizeW = 0,resizeH = 0;//压缩设置let maxSize = {width:765,height:350,level:0.9   //图片保存质量};//计算压缩比例if(w > maxSize.width || h > maxSize.height){let multiple = Math.max(w / maxSize.width , h / maxSize.height);resizeW = w / multiple;resizeH = h / multiple; }else{resizeW = w;resizeH = h;}let canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');if(window.navigator.userAgent.indexOf('iphone') > 0){canvas.width = resizeH;canvas.height = resizeW;ctx.retate(90 * Math.PI / 180);ctx.drawImage(Img,0,-resizeH,resizeW,resizeH);}else{canvas.width = resizeW;canvas.height = resizeH;ctx.drawImage(Img,0,0,resizeW,resizeH);}that.set_head = canvas.toDataURL('image/jpeg',maxSize.level); //console.log(that.set_head)var arr = that.set_head.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  while(n--){ u8arr[n] = bstr.charCodeAt(n);  }  var aa = new File([u8arr], '123.jpg', {type:mime});//console.log(aa)that.param = new FormData(); that.param.append('imgFile', aa, aa.set_head);var names = that.form.imgFile; that.param.append('message', names);//console.log(that.param) /**将base64转化成FormData end */ let config = {headers: {'Content-Type': 'multipart/form-data'}}; that.$axios.post(that.action, that.param, config).then(function(res) { if(res.data.invokeResultCode == 200){ that.$message.success("图片上传成功"); //console.log(res.data.data.url);  that.imageUrl=res.data.data.imgUrl;that.dialogVisible = false;}else{that.$message.error(res.data.invokeResultMessage);}}).catch((res) => { that.$message.error('请稍候重试或联系管理员');})}
},imageuploaded(res) {//console.log(4)//console.log(res)
},
handleError(){//console.log(5)this.$notify.error({title: '上传失败',message: '图片上传接口上传失败，可更改为自己的服务器接口'});
},

vue-cli + ElementUI 裁切上传图片自定义接口相关推荐

Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
基于Vue和Element-UI自定义分组以及分组全选Select 选择器
文章目录基于Vue和Element-UI自定义分组以及分组全选Select 选择器在这里插入图片描述源代码基于Vue和Element-UI自定义分组以及分组全选Select 选择器上一篇博文 ...
Vue CLI配置与安装
文章目录一.关于Vue CLI 安装Node.js 安装Vue CLI 创建Vue CLI项目启动项目停止服务重启服务二. Vue CLI项目结构关于.vue视图文件关于路由配置关于r ...
体验 vue cli 3.0
vue cli 3x 发布已经有好长一段时间了,webpack 4x 现在版本已经到了 4.28.0:如果你现在用或者不用手脚架搭建项目,我都推荐你使用 webpack 4x,体验一把新技术带来的变化 ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...

vue-cli + ElementUI 裁切上传图片自定义接口

vue-cli + ElementUI 裁切上传图片自定义接口相关推荐

最新文章

热门文章

vue-cli + ElementUI 裁切上传图片 自定义接口

vue-cli + ElementUI 裁切上传图片 自定义接口相关推荐

最新文章

热门文章

vue-cli + ElementUI 裁切上传图片自定义接口

vue-cli + ElementUI 裁切上传图片自定义接口相关推荐