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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
详解ES6中的let命令
Apr 05 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
javaScript中indexOf用法技巧
Nov 26 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
javascript json2 使用方法
2010/03/16 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
详解VUE 数组更新
2017/12/16 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
anaconda如何查看并管理python环境
2019/07/05 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
基于Python实现天天酷跑功能
2021/01/06 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
请介绍一下Ant
2016/07/22 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
司机检讨书
2014/02/13 职场文书
项目投资合作意向书
2014/07/29 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
HTML+JS实现在线朗读器
2022/02/15 Javascript
create-react-app开发常用配置教程
2022/06/25 Javascript