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

vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用，供大家参考，具体内容如下

如下图所示，点击上传组件，选择文件后，会立马弹出图片裁剪功能组件的页面

问题描述：

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

由于el-upload组件默认使用的是
“选取文件后立即进行上传”，可通过auto-upload属性进行修改，将auto-upload设置为false；
同时也不显示已上传的文件列表，通过show-file-list属性修改，将show-file-list设置为false。

获取上传的组件说明：使用elementUI 提供的方法 on-change,获取已上传的组件

elementUI中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 = 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代码，包含上面的代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。