Javascript Vuejs Dropzone-如何包括+&引用；当dropzone中已经有一些图像时，单击图标

我刚刚使用Vue dropzone创建了一个简单的文件上传器组件。然而，当dropzone中已经有一些图像时，我想通过包括一个图标或一个名为“添加更多图像”的按钮来定制它，以便用户能够理解他们可以上传多张照片。我怎样才能做到这一点？下面是我的代码和我想要实现的屏幕截图

更新我仍在尝试实现此功能，如有任何帮助，将不胜感激

更新2我仍然被这件事困扰着，有人能很好地指导我吗

   <template>
  <vue-dropzone
    id="drop1"
    :options="dropOptions"
    :useCustomSlot="true"
    @vdropzone-complete="afterComplete"
  >
    <div class="dropzone-custom-content">
      <i class="fas fa-cloud-upload-alt fa-3x"></i>
      <h4 class="dropzone-custom-title mb-0 mt-3">Drag & Drop</h4>
      <div class="subtitle">or click to add your image</div>
    </div>
  </vue-dropzone>
</template>


import vueDropzone from "vue2-dropzone";

export default {
  data() {
    return {     
      dropOptions: {   
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160, // px
        thumbnailHeight: 160
      }       
    };
  },
  components: {
    vueDropzone
  }
};

拖放
或者单击以添加您的图像
从“vue2 dropzone”导入vueDropzone；
导出默认值{
数据（）{
返回{
dropOptions:{
url:“https://httpbin.org/post",
acceptedFiles:“image/*”，
addRemoveLinks：是的，
指钉宽度：160，//px
拇指指甲高度：160
}       
};
},
组成部分：{
vueDropzone
}
};

我想达到的目标

---

似乎没有官方的方法可以做到这一点。但是从这里，我修改了他的代码，以便与

vue2 dropzone

一起使用，如下所示：

<template>
  <div>
    <vue-dropzone id='dropzone'
      ref='myVueDropzone'
      :options='dropzoneOptions'
      @vdropzone-file-added='handleMoreThumbnail'
      @vdropzone-removed-file='handleMoreThumbnail'>
    </vue-dropzone>
    <div class='more' ref='more'>+</div>
  </div>
</template>

<script>
  import vueDropzone from 'vue2-dropzone'
  import 'vue2-dropzone/dist/vue2Dropzone.min.css'

  export default {
    components: {
      vueDropzone
    },

    data () {
      return {
        dropzoneOptions: {
          url: 'https://httpbin.org/post',
          addRemoveLinks: true
        }
      }
    },

    mounted () {
      this.$el.removeChild(this.$refs.more)
    },

    methods: {
      handleMoreThumbnail () {
        let dropzone = this.$refs.myVueDropzone.dropzone
        dropzone.files.length > 0
          ? dropzone.element.appendChild(this.$refs.more)
          : dropzone.element.removeChild(this.$refs.more)
      }
    }
  }
</script>

<style>
  .more {
    display: inline-block;
    margin: 16px;
    border: 3px dashed lightgray;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    color: lightgray;
    border-radius: 8px;
    font-size: 60px;
    text-align: center;
    line-height: 200px;
    pointer-events: none;
  }
</style>

+
从“vue2 dropzone”导入vueDropzone
导入“vue2 dropzone/dist/vue2 dropzone.min.css”
导出默认值{
组成部分：{
vueDropzone
},
数据（）{
返回{
dropzoneOptions：{
网址：'https://httpbin.org/post',
addRemoveLinks：正确
}
}
},
挂载（）{
此.$el.removeChild（此.$refs.more）
},
方法：{
HandleMore缩略图（）{
设dropzone=this.$refs.myVueDropzone.dropzone
dropzone.files.length>0
？dropzone.element.appendChild（此.$refs.more）
：dropzone.element.removeChild（此.$refs.more）
}
}
}
.更多{
显示：内联块；
利润率：16px；
边框：3个浅灰色虚线；
宽度：200px；
高度：200px；
框大小：边框框；
颜色：浅灰色；
边界半径：8px；
字体大小：60px；
文本对齐：居中；
线高：200px；
指针事件：无；
}

Hi，用户28。谢谢你的回复和回答！我真的很感激：>最后一件事，每当我单击本机后退/前进按钮并返回到Vue drop zone组件时，“+”按钮将仍然存在，即使没有图像。更新：我自己设法解决了上述问题。谢谢你的帮助！我非常感激。