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 select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
window.location.hash知识汇总
Nov 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
深入了解JavaScript 私有化
May 30 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
JS实现选项卡效果的代码实例
2019/05/20 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
社区班子对照检查材料
2014/08/27 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
葬礼主持词
2015/07/02 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL