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. 示例图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: js异步编程小技巧详解
推荐阅读