vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解 vue项目ElementUI组件中el-upload组

vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用，供大家参考，具体内容如下
如下图所示，点击上传组件，选择文件后，会立马弹出图片裁剪功能组件的页面

文章图片

文章图片

问题描述：
1.在使用upload组件中，如果修改fileList中的内容，浏览器会报错
2.获取上传的文件，传递给图片裁剪组件（在on-change中获取文件并传递个裁剪组件）
3.要获取裁剪后的图片即File文件（将裁剪后的图片返回出去）
4.获取到裁剪后的file调用上传的接口

【vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解】由于el-upload组件默认使用的是
“选取文件后立即进行上传”，可通过auto-upload属性进行修改，将auto-upload设置为false；
同时也不显示已上传的文件列表，通过show-file-list属性修改，将show-file-list设置为false。

获取上传的组件说明：使用elementUI 提供的方法 on-change,获取已上传的组件
elementUI中upload组件部分属性如下：

vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

文章图片

文章图片

关于裁剪组件，请看裁剪组件链接文档
本案例主要代码如下：

文章图片
添加

文章图片

对应的方法

changePhotoFile(file, fileList){if (fileList.length > 0) {this.photoList = [fileList[fileList.length - 1]]}this.handleCrop(file); },handleCrop(file){this.$nextTick(()=>{this.$refs.myCropper.open(file.raw || file)})},// 点击弹框重新时触发upAgain(){this.$refs['upload'].$refs["upload-inner"].handleClick(); },getFile(file){const formData = https://www.it610.com/article/new FormData(); formData.append("file",file)uploadSelfCompanyLogo(formData).then(res =>{if (res.code === 0) {this.companyInfo.logo = res.filename; this.companyInfo.imageUrl = res.url; this.imageUrl = res.url; //上传成功后，关闭弹框组件// this.handleCrop(file); this.$refs.myCropper.close()} else {this.$message.error('上传出错'); }})},

整个vue代码，包含上面的代码

.form-out{width: 1100px; border-radius: 10px; background: #fff; .form {padding: 40px 120px; margin: 0 auto; display: table; .tag {text-align: center; margin: 0 0 40px 0; .tag-main{display: inline-block; font-size:16px; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; color:#222222; padding: 0 10px}.slash {color: #437FFF; font-weight: bold; font-size: 16px; }.light-slash {color: #437fff; font-weight: bold; font-size: 16px; opacity: 0.5; }}.com-name{display: inline-block; /*width:224px; */height:22px; font-size:16px; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(51,51,51,1); line-height:22px; }.avatar {width: 80px; height: 80px; /*border-radius: 30px; */vertical-align: middle; }.avatar-desc {color: #999; font-size: 12px; padding-left: 10px; }.tag-other {margin-top: 40px; }.submit {display: flex; justify-content: center; margin-top: 40px; .submit-button {background: #437FFF; width: 390px; margin-top: 20px; font-size: 22px; }.next-button{width:140px; height:42px; border-radius:6px; font-size:16px; color: #999999; border: 1px solid transparent; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; }.return-back{display: inline-block; height:42px; line-height: 42px; width:70px; font-size:14px; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(102,102,102,1); margin-left: 50px; &:hover{cursor: pointer; }}.next-button-bg-grew{background:#E5E5E5; }.next-button-bg-blue{background:#437FFF; color:#FFFFFF}}}}.el-input__inner {width:540px; height:42px; background:rgba(249,249,249,1); border-radius:2px; border: 1px solid transparent; }.el-form-item__label{font-size:16px; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:#222222; }input::-webkit-input-placeholder {height:21px; font-size:15px; font-weight:400; color:rgba(204,204,204,1); line-height:21px; }input::-ms-input-placeholder {height:21px; font-size:15px; font-weight:400; color:rgba(204,204,204,1); line-height:21px; }.my-icon-plus{background: url("../../../assets/img/upload/upload_plus.png") no-repeat; background-size: 24px 24px; width: 24px; height: 24px; display: inline-block; }.my-icon-word{height:17px; font-size:12px; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:#437FFF; line-height:17px; }.form-out .avatar-uploader .el-upload {/*border: 1px dashed #d9d9d9; */border: 1px dashed #437FFF; border-radius: 6px; cursor: pointer; position: relative; /*overflow: hidden; */}.form-out .avatar-uploader .el-upload:hover {border-color: #409EFF; }.form-out .avatar-uploader-icon {font-size: 28px; color: #8c939d; width: 80px; height: 80px; text-align: center; display: flex; align-items: center; justify-content: center; }.form-out .avatar {width: 80px; height: 80px; display: block; }