欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:20:14
本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs...

本文实例为大家分享了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实现移动端图片裁剪上传功能

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