【vue+el-upload+vue-cropper】vue图片上传,vue-cropper图片裁剪后上传

本文主要是介绍【vue+el-upload+vue-cropper】vue图片上传,vue-cropper图片裁剪后上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一. 先看效果演示

在这里插入图片描述

二. 图片上传

用的el-upload加el-image组件
html部分

<el-dialog>
...//无关代码已省略<div v-for="item in imgArr" :key="item.index"><span>{{ item.name }}</span><el-upload action="#" list-type="picture-card" :on-change="onChange.bind(null, item.index)" :auto-upload="false" :file-list="item.fileList" :class="{ hide: item.hideUpload }"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{ file }"><el-image class="el-upload-list__item-thumbnail" :src="item.aimgSrc" alt="" :onerror="defaultImg" :preview-src-list="item.fileList"></el-image><span class="el-upload-list__item-actions">// 预览按钮<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>// 删除按钮<span class="el-upload-list__item-delete" @click="handleRemove(file, item.index)"><i class="el-icon-delete"></i></span>// 裁剪按钮<span v-if="item.index == 6" class="el-upload-list__item-delete" @click="beforeCrop(file)"><i class="el-icon-scissors"></i></span></span></div></el-upload></div>
</el-dialog>
....

注释:
el-upload
:on-change=“onChange.bind(null, item.index)” 不加.bind会报错,
:auto-upload=“false” 表示不自动上传,也就是手动上传
:file-list=“item.fileList” 上传的图片列表,数组对象格式[{url:xxxx}]
:class=“{ hide: item.hideUpload }” 到el-image使用,上传完后影藏那个加号和虚线框

el-image
:οnerrοr=“defaultImg” 图片加载失败,报错时候的默认图片.
:preview-src-list=“item.fileList” 预览的图片列表,同:file-list=“item.fileList”

预览,删除,裁剪,三个按钮,目前功能与预览无关,预览功能有空再另写吧

js部分

imgArr: [// aimgFile调接口, aimgSrc回显, hideUpload影藏加号, fileList预览大图{ index: 0, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 1, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 2, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 3, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 4, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 5, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },{ index: 6, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },],files :'', //裁剪图片的标记// 上传图片 index 图片下标 file图片内容 flag裁剪图片的标记onChange(index, file, flag) {this.files = file.rawconst isJPG = file.raw.type === 'image/jpeg' || file.raw.type == 'image/png'const isLt2M = file.raw.size / 1024 / 1024 < 2if (!isJPG) {this.$message.error('上传图片只能是 JPG 或 PNG 格式!')this.handleRemove(file.raw, index)return}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!')this.handleRemove(file.raw, index)return}// 上传图片const fileData = new FormData()fileData.append('imgFile', file.raw)fileData.append('imgType', 1)// 调接口doctorAccessoryUpload(fileData).then((res) => {if (res) {this.imgArr[index].hideUpload = truethis.imgArr[index].aimgSrc = file.urlthis.imgArr[index].aimgFile = res.result// 裁剪后上传if (flag === 1) this.imgArr[index].fileList = [{ url: file.url }]} else {this.handleRemove(file.raw, index)}})},// 删除上传图片handleRemove(file, index) {this.imgArr[index].aimgSrc = ''this.imgArr[index].aimgFile = ''this.imgArr[index].fileList = []this.imgArr[index].hideUpload = false},

三. 裁剪图片

下载vueCropper插件

	npm i vue-cropper --save  // 我的版本是^0.6.4

另起一个dialog

      <!-- 图片裁剪 --><el-dialog title="图片裁剪" :visible.sync="cropDialog" width="40%" :modal="true" :close-on-click-modal="false" center @close="cropCancles" v-dialogDrag><div class="cropBox"><template><div><vueCropper@mouseenter.native="enter"@mouseleave.native="leave"ref="cropper":img="option.uploadImg":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox"></vueCropper></div></template><div><img :src="cropImg" alt="" /></div></div><div slot="footer"><el-button @click="cropCancles">取 消</el-button><el-button type="primary" @click="cropConfirm">裁剪图片</el-button></div></el-dialog><script>import { VueCropper } from 'vue-cropper'export default {components: { VueCropper },data() {return {cropDialog: false,option: {uploadImg: '', // 原图地址info: true, // 裁剪框的大小信息outputSize: 1, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式canScale: true, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [3, 4], // 截图框的宽高比例full: false, // 是否输出原图比例的截图canMove: true, //是否可以移动原图canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},cropImg: require('../../public/img/default.png'),}}//开始裁剪enter() {if (this.option.uploadImg == '') {return}this.$refs.cropper.startCrop()},//停止裁剪leave() {this.$refs.cropper.stopCrop()this.$refs.cropper.getCropData((data) => {this.cropImg = data})},// 裁剪前beforeCrop(file) {this.option.uploadImg = file.urlthis.cropDialog = truesetTimeout(() => {this.$refs.cropper.getCropData((data) => {this.cropImg = data})}, 500)},// 确认裁剪cropConfirm() {//获取截图的base64格式数据this.$refs.cropper.getCropData((data) => {this.cropImg = datathis.handleRemove(this.files, this.imgArr.length - 1)this.cropCancles()setTimeout(() => {this.onChange(this.imgArr.length - 1, { raw: this.dataURLtoFile(data, 'Default.jpg'), url: data }, 1)}, 1000)})},// 取消裁剪cropCancles() {this.cropDialog = falsethis.option.uploadImg = ''this.cropImg = require('../../public/img/default.png')},// base64转filedataURLtoFile(dataurl, filename) {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},}</script>