怎么在一个Form里的不同Form Item独立使用VUE-CROPPER这个组件

Question

问题描述

<Form>

<FormItem></FormItem>
    <VueCropper></VueCropper>
<FormItem></FormItem>
<FormItem></FormItem>
    <VueCropper></VueCropper>
<FormItem></FormItem>

</Form>
如果以这种方法导入的话，第二个vueCropper上传的图片也会赋值给第一个组件的:img属性，图片显示在第一个组件内，而第二个组件查看是src(null)

问题出现的环境背景及自己尝试过哪些方法

加上id和ref不同值也不行，放在不同的Form也不行

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<Form>
<FormItem>

  <CropImg></CropImg>

</FormItem>
</Form>
<Form>
<FormItem>

  <CropImg></CropImg>

</FormItem>
</Form>

//CropImg.js
<template>

<div class="wrapper">
    <div class="test">
        <div v-show="this.crop_img_show" ref="crop_img_show">
            <img class="crop-img-show" :src="crop_base64"/>
        </div>
        <div class="crop-range-show" v-show="this.crop_option.img && this.vuecrop_show">
            <VueCropper
                ref="cropper2"
                :img="crop_option.img"
                :outputSize="crop_option.size"
                :outputType="crop_option.outputType"
                :info="crop_option.info"
                :canScale="crop_option.canScale"
                :autoCrop="crop_option.autoCrop"
                :autoCropWidth="crop_option.autoCropWidth"
                :autoCropHeight="crop_option.autoCropHeight"
                :fixed="crop_option.fixed"
                :fixedNumber="crop_option.fixedNumber"
                :full="crop_option.full"
                :mode="crop_option.mode"
            ></VueCropper>
        </div>
    </div>
    <label class="btn" for="upload2">{{this.$t("com.select")}}{{this.$t("org.user.add.img_lnk")}}</label>
    <input type="file" ref="img_upload" v-show="false" id="upload2" accept="image/png, image/jpeg, image/gif, image/jpg"
           @change="uploadImg($event,2)">
    <a @click="doCrop"  v-show="!!this.crop_option.img==true&&this.vuecrop_show" class="btn">{{this.$t("com.crop_pic")}}</a>
</div>

</template>

<script>;

import {VueCropper} from 'vue-cropper'
export default {
    data: function () {
        return {
            crop_img_show: false,
            crop_base64:'',
            vuecrop_show:true,
            crop_option: {
                //img的路径自行修改
                img: ''
                info: true,
                size: 1,
                outputType: 'jpeg',
                canScale: true,
                autoCrop: true,
                // 只有自动截图开启 宽度高度才生效
                //autoCropWidth: 300,
                //autoCropHeight: 250,
                fixed: true,
                // 真实的输出宽高
                infoTrue: true,
                full: true,
                fixedNumber: [4, 3],
                mode: '100%'
            }
        }
    },
    props:{
        original_url: {
            default: "",
            type: String,
        }
    },

    mounted: function () {
        this.crop_img_show = !!this.original_url;
        this.crop_base64 = this.original_url;
    },

    methods: {
        //点击裁剪，这一步是可以拿到处理后的地址
        doCrop (e) {
            e.stopPropagation();
            this.$refs["cropper2"].getCropData((data) => {
                this.crop_img_show = true;
                this.crop_base64 = data;
                this.vuecrop_show = false;
                if(data){
                    this.uploadBase64Img();
                }
            })

        },

        uploadImg (e, num) {
            //上传图片
            var file = e.target.files[0];
            console.log(file);
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
                return false;
            }
            var reader = new FileReader();
            reader.onload = (e) => {
                let data;
                console.log(file);
                data = e.target.result;
                if (typeof e.target.result === 'object') {
                    // 把Array Buffer转化为blob 如果是base64不需要
                    data = window.URL.createObjectURL(new Blob([e.target.result]));
                    console.log(data);
                } else {
                    data = e.target.result
                };

                if (num === 1) {
                    this.option.img = data
                } else if (num === 2) {
                    this.crop_option.img = data
                }
                this.crop_img_show = false;
                //this.crop_base64 = data;
                this.vuecrop_show = true;
                this.$refs["img_upload"].value=null;
            }
            reader.readAsArrayBuffer(file);
        },

        uploadBase64Img(){
            let data = {file:this.crop_base64}
            this.$base.showLoading();
            this.$request.sendPostImg("upload/base64",data,(success,data,error)=>{
                this.$base.hideLoading();
                if(success){
                    console.log(data);
                    //this.formData.img_link = data.id;
                    //this.formData.img_link_src = data.url +"?"+ new Date().getTime();
                }
                else{
                    this.$base.alertErr("",error.errmsg);
                }
            });
            return false;
        },
    },
    components: {

    },
}

</script>

<style>

* {
    margin: 0;
    padding: 0;
}

.btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin:20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
}

.test {
    height: auto;
    width: 80%;
    background-color: transparent;
}

.crop-img-show
{
    width: 320px;
    height: 240px;
}

.crop-range-show{
    width: 100%;
    height: 300px;
}

</style>

你期待的结果是什么？实际看到的错误信息又是什么？