vue实现移动端图片裁剪上传功能-创新互联

本文实例为大家分享了vue移动端图片裁剪上传的具体代码，供大家参考，具体内容如下

创新互联公司从2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、网站建设、外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元连山做网站,已为上家服务,为连山各地企业和个人服务,联系电话:18980820575

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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：vue实现移动端图片裁剪上传功能-创新互联
文章源于：https://www.cdcxhl.com/article12/cdspgc.html

成都网站建设公司_创新互联，为您提供网站内链、微信公众号、域名注册、品牌网站建设、App设计、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容