vue实现移动端图片裁剪上传功能


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下

1.安装cropperjs依赖库

npm install cropperjs

2.编写组件SimpleCropper.vue

<template> 
 <div class="v-simple-cropper"> 
 <slot> 
 <button @click="upload">上传图片</button> 
 </slot> 
 <input class="file" ref="file" type="file" accept="image/*" @change="uploadChange"> 
 <div class="v-cropper-layer" ref="layer"> 
 <div class="layer-header"> 
 <button class="cancel" @click="cancelHandle">取消</button> 
 <button class="confirm" @click="confirmHandle">裁剪</button> 
 </div> 
 <img ref="cropperImg"> 
 </div> 
 </div> 
</template> 
 
<script> 
import Cropper from 'cropperjs' 
import 'cropperjs/dist/cropper.min.css' 
export default { 
 name: 'v-simple-cropper', 
 props: { 
 initParam: Object, 
 successCallback: { 
 type: Function, 
 default: () => {} 
 } 
 }, 
 data () { 
 return { 
 cropper: {}, 
 filename: '' 
 } 
 }, 
 mounted () { 
 this.init() 
 }, 
 methods: { 
 // 初始化裁剪插件 
 init () { 
 let cropperImg = this.$refs['cropperImg'] 
 this.cropper = new Cropper(cropperImg, { 
 aspectRatio: 1 / 1, 
 dragMode: 'move' 
 }) 
 }, 
 // 点击上传按钮 
 upload () { 
 this.$refs['file'].click() 
 }, 
 // 选择上传文件 
 uploadChange (e) { 
 let file = e.target.files[0] 
 this.filename = file['name'] 
 let URL = window.URL || window.webkitURL 
 this.$refs['layer'].style.display = 'block' 
 this.cropper.replace(URL.createObjectURL(file)) 
 }, 
 // 取消上传 
 cancelHandle () { 
 this.cropper.reset() 
 this.$refs['layer'].style.display = 'none' 
 this.$refs['file'].value = '' 
 }, 
 // 确定上传 
 confirmHandle () { 
 let cropBox = this.cropper.getCropBoxData() 
 let scale = this.initParam['scale'] || 1 
 let cropCanvas = this.cropper.getCroppedCanvas({ 
 width: cropBox.width * scale, 
 height: cropBox.height * scale 
 }) 
 let imgData = cropCanvas.toDataURL('image/jpeg') 
 let formData = new window.FormData() 
 formData.append('fileType', this.initParam['fileType']) 
 formData.append('img', imgData) 
 formData.append('signId', this.$localStorage('signId')) 
 formData.append('originalFilename', this.filename) 
 window.$axios(this.initParam['uploadURL'], formData, { 
 method: 'post', 
 headers: {'Content-Type': 'multipart/form-data'} 
 }).then(res => { 
 this.successCallback(res.data) 
 this.cancelHandle() 
 }) 
 } 
 } 
} 
</script> 
 
<style lang="less"> 
.v-simple-cropper { 
 .file { 
 display: none; 
 } 
 .v-cropper-layer { 
 position: fixed; 
 top: 0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #fff; 
 z-index: 99999; 
 display: none; 
 .layer-header { 
 position: absolute; 
 top: 0; 
 left: 0; 
 z-index: 99999; 
 background: #fff; 
 width: 100%; 
 height: .8rem; 
 padding: 0 .2rem; 
 box-sizing: border-box; 
 } 
 .cancel, 
 .confirm { 
 line-height: .8rem; 
 font-size: .28rem; 
 background: inherit; 
 border: 0; 
 outline: 0; 
 float: left; 
 } 
 .confirm { 
 float: right; 
 } 
 img { 
 position: inherit!important; 
 border-radius: inherit!important; 
 float: inherit!important; 
 } 
 } 
} 
</style>

3.引用组件

<template> 
 <simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" ref="cropper"> 
 <img :src="userImg" @click="upload"> 
 </simple-cropper> 
</template> 
 
<script> 
import SimpleCropper from '@/components/SimpleCropper' 
export default { 
 name: 'info', 
 data () { 
 return { 
 uploadParam: { 
 fileType: 'recruit', // 其他上传参数 
 uploadURL: this.$dataURL + 'uploadAction/qcloudImg', // 上传地址 
 scale: 4 // 相对手机屏幕放大的倍数: 4倍 
 }, 
 userImg: this.$dataURL + 'test.png' 
 } 
 }, 
 methods: { 
 // 上传头像 
 upload () { 
 this.$refs['cropper'].upload() 
 }, 
 // 上传头像成功回调 
 uploadHandle (data) { 
 if (data.state === 'SUCCESS') { 
 this.userImg = this.form.headImgUrl = data.fileId 
 } 
 } 
 }, 
 components: { 
 SimpleCropper 
 } 
} 
</script>

4.示例图

vue实现移动端图片裁剪上传功能

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery原生的动画效果
Jul 10 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
js实现模拟购物商城案例
May 18 Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
You might like
图解上海144收音机
2021/03/02 无线电
php下使用SMTP发邮件的代码
2008/01/10 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
Javascript的闭包
2009/12/31 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python中如何添加自定义模块
2020/06/09 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
活动总结新闻稿
2014/08/30 职场文书
党员自我剖析材料
2014/08/31 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
董存瑞观后感
2015/06/11 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书