VueJs: индикатор выполнения и сообщение об ошибке Vue2Dropzone не отображаются при использовании previewTemplate - PullRequest
Новая
       72

VueJs: индикатор выполнения и сообщение об ошибке Vue2Dropzone не отображаются при использовании previewTemplate

0 голосов
/ 28 декабря 2018

Я использую Vue2Dropzone для загрузки файла.Я хочу использовать собственный шаблон для настройки макета.Но при использовании previewTemplate не отображается ни индикатор выполнения, и, если возникает ошибка, он говорит [Object].Но это удар по URL-адресу загрузки, но нет индикатора выполнения.Вот мой код

<template lang="pug">
  .dropzone-image-upload
    .dropzone-image-upload__title.dropzone-image-upload__title_vuetified Upload File
    vue-dropzone(
      id="dropzone"
      width="533px",
      height="76px",
      :options="dropzoneOptions",
      :useCustomSlot="true",
    )
      div.dropzone-custom-content
        span.dropzone-custom-title Drag file here or &nbsp;
        a browse
    .dropzone-image-upload__assistive-text Maximum upload file size: 64 MB
</template>


<script>
import vue2Dropzone from 'vue2-dropzone';

const getTemplate = () => `
<div class="dz-preview-new dz-file-preview">
  <div class="dz-image">
    <div data-dz-thumbnail-bg></div>
  </div>
  <div class="dz-details">
    <div class="dz-size"><span data-dz-size></span></div>
    <div class="dz-filename"><span data-dz-name></span></div>
  </div>
  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
  <div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>
`;

export default {
  components: {
    vueDropzone: vue2Dropzone,
  },

  data() {
    return {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFiles: 1,
        maxFilesize: 64,
        // acceptedFiles: '.xlsx,.xls,.csv',
        previewTemplate: getTemplate(),
      },
    };
  },

  methods: {

    afterComplete() {
      this.$emit('true');
    },
  },
};
</script>

<style scoped>
  @import url('~dropzone/dist/dropzone.css');
</style>

<style lang="stylus" scoped>
  @import '~styles/variables';
  @import '~styles/dropzone';

  .dropzone-custom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .dropzone-custom-title {
    margin-top: 0;
    color: #C4C4C4;
  }


  #drop1 {
    height: 200px;
    padding: 40px;
    color: white;
    background: black;
  }

  #drop1 .dz-preview {
    width: 160px;
  }

  #drop1 .dz-preview-new {
    position: absolute;
  }
</style>

Здесь я использую Pug в качестве шаблона движка.Файлы загружаются, но индикатор выполнения отсутствует.

...