vue项目实现添加图片裁剪组件

本文实例为大家分享了vue项目添加图片裁剪组件的具体代码，供大家参考，具体内容如下

功能如下图所示：

1、安装命令如下

npm i vue-cropper --save

2、调用组件，引入vue-cropper

import { VueCropper } from “vue-cropper”;

3、封装组件代码如下:cropper.vue

4、在其他vue组件使用，引用cropper.vue

import MyCropper from "./cropper.vue"

export default里面添加

components:{MyCropper},

html中引入

对应的js方法代码

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('上传出错');
                    }
                })
               // this.$refs.upload.submit();
 },

注意：以上代码并不完整， 裁剪组件和elementUI组件中的el-upload的结合使用方法如链接裁剪组件和el-uplod结合

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