vue-cropper裁切图片并且上传

测试了好久才能具体用到项目中，所以记录一下，也希望对即将遇到的小伙伴也有帮助。
页面中有个显示图片的区域以及浏览按钮（选择上传文件），如图：

选择上传的图片，弹出裁切框（我封装成弹窗），如图：

刚开始浏览选中的照片给显示区域url并且给裁切框url，裁切好点击完成按钮上传到后台，裁切框消失，并且裁切好的图片回显到显示区域。（大概逻辑）
代码撸上前工作：

npm install vue-cropper --save

封装：在components新建一个Cropper.vue

<template><div class="custom-upload"><el-dialogtitle="图片裁剪":visible.sync="showCropper"top="6vh"width="30%"height="400"class="cropper-dialog"centerappend-to-body><vue-cropperv-if="showCropper"id="corpper"ref="cropper":class="{'corpper-warp':showCropper}"v-bind="cropper"/><div v-if="showCropper" class="cropper-button"><el-button class="cancel-btn" size="small" @click.native="showCropper=false">取消</el-button><el-button size="small" type="primary" :loading="loading" @click="uploadCover">完成</el-button></div></el-dialog><div class="photoUpload_right"><div class="photoUpload_des"><span class="photoUpload_txt">上传本地媒体图片</span></div><label for="fileinp" class="photoUpload_btn"><inputclass="choosePhoto_file":id="id"type="file"style="display: none"name="single"accept="image/*"@change="onChange($event)"/><el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()"><span class="photoUpload_txt">浏览</span></el-button></label><div class="photoUpload_tips"><span class="tips_des">请上传身份证（头像面）图片或者护照、港澳居民来往大陆通行证、</span><span class="tips_des">台湾居民来往大陆通行证中的任意一种</span></div></div><div v-if="tips" class="tips clear-margin-top">{{ tips }}</div></div>
</template><script>
// 上传文件组件
import { VueCropper } from 'vue-cropper'
import { Message, Header } from 'element-ui';
// 上传接口
import { uploadImg } from '../api/index'
// 封装方法
import { isImageFile, isMaxFileSize, readFile } from '../utils/upload'   // 见下文
export default {components: {VueCropper},props: {// 最大上传文件的大小maxFileSize: {type: Number,default: 2 // （MB)},// 按钮文字buttonName: {type: String,default: '添加图片'},// 提示内容tips: {type: String},// 图片裁剪比列fixedNumber: {type: Array,default: function() {return []}},// 图片文件分辨率的宽度width: {type: Number,default: 460},// 图片文件分辨率的高度height: {type: Number,default: 300}},data() {return {cropperUrl: '', // 裁切后的图片base64fileName: '', // 文件名，用于blob转化成file对象uploadFile: '', // 点击浏览获取的文件对象id: 'cropper-input-' + +new Date(),loading: false,showCropper: false,cropper: {img: '',info: true,size: 0.9,outputType: 'png',canScale: true,autoCrop: true,full: true,// 只有自动截图开启 宽度高度才生效autoCropWidth: this.width,autoCropHeight: this.height,fixedBox: false,// 开启宽度和高度比例fixed: true,fixedNumber: this.fixedNumber,original: false,canMoveBox: true,canMove: true}}},methods: {// 打开文件handleOpenFile() {const input = document.getElementById(this.id)// 解决同一个文件不能监听的问题input.addEventListener('click',function() {this.value = ''},false)// 点击inputinput.click()},// 裁剪input 监听async onChange(e) {this.uploadFile = e.target.files[0]this.fileName = this.uploadFile.nameif (!this.uploadFile) {return Message.error('选择图片失败')}// 验证文件类型if (!isImageFile(this.uploadFile)) {return}try {// 读取文件const src = await readFile(this.uploadFile)this.showCropper = truethis.cropper.img = srcconsole.log(this.cropper.img)this.$emit('subUploadSucceed', this.cropper.img, '')} catch (error) {console.log(error)}},// 封面上传功能uploadCover() {// 获取裁切后的图片的base64this.$refs.cropper.getCropData((baseUrl) => {// 发送数据给父组件this.cropperUrl = baseUrl})// 获取图片的blobthis.$refs.cropper.getCropBlob(imgRes => {// 文件大小限制isMaxFileSize (imgRes, 5)// if (imgRes.size/1024/1024 > 5) {//   this.$message.info('图片上传不能超过5M')//   return false// }// 利用File Api中blob转成File对象let files = new window.File([imgRes], this.fileName)let param = new FormData() // 创建form对象param.append('file', files)param.append('cusCode', this.$store.state.cusCode)// 通过append向form对象添加数据// 设置请求头var headerData = {'Content-type': 'multipart/form-data; charset=UTF-8'}this.loading = trueuploadImg(param, headerData).then(res => {console.log(res)if (res.status === 200) {// 上传成功this.$emit('subUploadSucceed', this.cropperUrl, res.data)this.$message.success('上传成功')this.loading = falsethis.showCropper = false  // 裁切框隐藏}}).catch(res => {this.loading = falsethis.$message.error('上传失败')})})}}
}
</script><style lang="scss" scoped>
#corpper {width: 100%;height: 300px;margin: 0 auto;background-image: none;background: #fff;z-index: 1002;
}
.cropper-dialog {text-align: center;.el-dialog__header {padding-top: 15px;}.el-dialog--center .el-dialog__body {padding-top: 0;padding-bottom: 15px;}.el-dialog {text-align: center;}
}
.photoUpload_right {padding-top: 52px;.photoUpload_des {line-height: 16px;margin-top: 42px;.photoUpload_txt {color: #c7c7c7;font-size: 16px;}}.photoUpload_btn{position: relative;.choosePhoto_file {width: 240px;height: 28px;margin: 0px;padding-left: 20px;}input::-webkit-input-placeholder {color: #9a9a9a;font-size: 14px;}}.photoUpload_tips {margin-top: 8px;.tips_des {font-size: 16px;color: #c7c7c7;}}
}
.cropper-button {z-index: 1003;text-align: center;margin-top: 20px;.el-button {font-size: 16px;cursor: pointer;text-align: center;}.cancel-btn {color: #373737;}.el-button:last-child {margin-left: 100px;}
}
.cropper-modal {background-color: rgba(0, 0, 0, 0.5) !important;
}
.custom-upload {.tips {margin-top: 10px;color: red;font-size: 12px;}.clear-margin-top {margin-top: 0;}
}
</style>

这里说明一下：因为后台死都只要file对象作为参数，所以各种转换。
官方文档直通车：https://github.com/xyxiao001/vue-cropper

页面使用：

html:
<el-form-item label="请上传个人证件图片：" class="photo"><div class="photoUpload"><div class="photoUpload_left"><img :src="formData.url" alt="" class="photoUpload_img"></div><App-cropper:width="200":height="200":fixed-number="[1,1]"@subUploadSucceed="getShopImages"/></div>
</el-form-item>
js:
引入组件
import AppCropper from '../../components/Cropper.vue'
components: {AppCropper},
data () {return {licenseImg: '', // 图片路径，后台需要的参数}
},
methods: {// 子组件传递过来的方法getShopImages(url, licenseImg) {console.log(url, licenseImg)// 图片显示this.formData.url = url// 图片路径（后台需要的参数）this.licenseImg = licenseImg},
}

完成：

少说话，多做事，学会调节自己，九月，加油！

vue-cropper裁切图片并且上传相关推荐

vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
Vue+element实现图片的上传与显示
业务逻辑:某个模块新增时新增图片,详情显示也有图片字段,编辑也能对图片进行编辑. 1.图片上传自己写了一个图片上传的组件,在父组件中引入即可,图片上传组件返回一个图片id的数组,然后在父组件的上传函 ...
vue移动端图片裁剪上传
1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template><div class=" ...
cropper固定宽高裁剪_使用Cropper进行图片剪裁上传
在项工按不移流果箭近作量同动量和头近作量同动目中,需要多上传的图片按照比例和尺寸进行裁剪,这类场景在一些CMS系统中是比较常见的,尤其是大部分的文章现在要适配PC.Mobile两种平台,文章的封面图等 ...
vue3 移动端裁切图片后上传
1.安装vue-imgcut和less-loader npm install vue-imgcut --save npm install less-loader -save 2.页面引入及使用 ...
cropper.js 裁剪图片并上传（文档翻译+demo）（转）
官网http://fengyuanchen.github.io/cropper/ 文档https://github.com/fengyuanchen/cropper/blob/master/READM ...
cropper.js 实现裁剪图片并上传(PC端)
博客地址:http://blog.mambaxin.com 由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比 ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
一个基于Vue的移动端多文件上传插件，支持常见图片的上传。
特性多文件上传上传图片预览上传状态监测删除指定图片清空图片重新上传安装 npm i vue-easy-uploader --save 使用在入口文件main.js中加入以下代码: im ...

vue-cropper裁切图片并且上传

vue-cropper裁切图片并且上传相关推荐

最新文章

热门文章