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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
第一个无线电台是由谁发明的
2021/03/01 无线电
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
div层的移动及性能优化
2010/11/16 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue-cli3 热更新配置操作
2020/09/18 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python执行使用shell命令方法分享
2017/11/08 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
django 信号调度机制详解
2019/07/19 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
postman传递当前时间戳实例详解
2019/09/14 Python
详解python中的lambda与sorted函数
2020/09/04 Python
精神文明建设标语
2014/06/16 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
高中班主任评语
2014/12/30 职场文书
技术转让协议书
2016/03/19 职场文书