本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下
1。安装cropperjs依赖库
2。编写组件SimpleCropper.vue
& lt; template>
& lt; div类=皏-simple-cropper”比;
& lt; slot>
& lt;按钮@click="上传"在上传图片& lt;/button>
& lt;/slot>
& lt;输入类="文件" ref=拔募崩嘈?拔募苯邮?巴枷?*”@change=皍ploadChange”比;
& lt; div类=" v-cropper-layer " ref=安恪北?
& lt; div类=發ayer-header”比;
& lt;按钮类=叭∠盄click=癱ancelHandle祝辞取消& lt;/button>
& lt;按钮类="确认" @click=癱onfirmHandle祝辞裁剪& lt;/button>
& lt;/div>
& lt; img ref=癱ropperImg”比;
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“cropperjs”进口收割机
进口的cropperjs/dist/cropper.min.css '
出口默认{
名称:“v-simple-cropper”,
道具:{
initParam:对象,
successCallback: {
类型:功能,
默认值:()=比;{}
}
},
数据(){
返回{
收割机:{},
文件名:“
}
},
安装(){
this.init ()
},
方法:{//初始化裁剪插件
init () {
参让cropperImg=? (“cropperImg”)
这一点。收割机=new收割机(cropperImg, {
aspectRatio: 1/1,
dragMode:“移动”
})
},//点击上传按钮
上传(){
参。美元(“文件”).click ()
},//选择上传文件
uploadChange (e) {
让文件=e.target.files [0]
这一点。文件名=文件(“名字”)
让URL=窗口。URL | | window.webkitURL
参。美元.style“层”。显示='块'
this.cropper.replace (URL.createObjectURL(文件)
},//取消上传
cancelHandle () {
this.cropper.reset ()
参。美元.style“层”。显示='没有'
参。美元(“文件”).valuehttps://www.yisu.com/zixun/=?
},//确定上传
confirmHandle () {
让cropBox=this.cropper.getCropBoxData ()
让规模=nitParam(的规模)| | 1
让cropCanvas=this.cropper.getCroppedCanvas ({
宽度:cropBox。宽度*规模,
高度:cropBox。高度*规模
})
让imgData=https://www.yisu.com/zixun/cropCanvas.toDataURL ('/jpeg图像')
让formData=https://www.yisu.com/zixun/new window.FormData ()
formData。追加(“文件类型”,this.initParam(“文件类型”))
formData。追加(img, imgData)
formData。追加(“signId”,这个。localStorage美元(signId))
formData。追加(originalFilename, this.filename)
窗口。axios美元(这一点。initParam [' uploadURL '], formData, {
方法:“文章”,
标题:{“内容类型”:“多部分/格式”}
})。然后(res=比;{
this.successCallback (res.data)
this.cancelHandle ()
})
}
}
}
& lt;/script>
& lt;风格lang=吧佟北?
.v-simple-cropper {
.file {
显示:没有;
}
.v-cropper-layer {
位置:固定;
上图:0;
底部:0;
左:0;
右:0;
背景:# fff;
z - index: 99999;
显示:没有;
.layer-header {
位置:绝对的;
上图:0;
左:0;
z - index: 99999;
背景:# fff;
宽度:100%;
高度:.8rem;
填充:0 .2rem;
box-sizing: border-box;
}
.cancel,
确定{
行高:.8rem;
字体大小:.28rem;
背景:继承;
边界:0;
大纲:0;
浮:左;
}
确定{
浮:正确;
}
img {
位置:继承!重要;
border - radius:继承!重要;
浮:继承!重要;
}
}
}
& lt;/style>
之前
3。引用组件
& lt; template>
& lt; simple-cropper: initParam=" uploadParam”: successCallback=皍ploadHandle ref=笆崭罨北?
& lt; img src=" https://www.yisu.com/zixun/userImg " @click=吧洗北?
& lt;/simple-cropper>
& lt;/template>
& lt; script>
从“@/组件/导入SimpleCropper SimpleCropper”
出口默认{
名称:“信息”,
数据(){
返回{
uploadParam: {
文件类型:“招募”,//其他上传参数
uploadURL:这个。美元dataURL + ' uploadAction/qcloudImg ',//上传地址
规模:4//相对手机屏幕放大的倍数:4倍
},
userImg:这个。美元dataURL +“test.png”
}
},
方法:{//上传头像
上传(){
参。美元(“收割机”).upload ()
},//上传头像成功回调
uploadHandle(数据){
如果(数据)。状态==='成功'){
这一点。userImg=this.form。headImgUrl=data.fileId
}
}
},
组件:{
SimpleCropper
}
}
& lt;/script>
