VueJs DropZone - Как изменить размер предварительно загруженных изображений в соответствии с размером эскиза - PullRequest
Новая
       28

VueJs DropZone - Как изменить размер предварительно загруженных изображений в соответствии с размером эскиза

1 голос
/ 24 мая 2019

Прежде всего, я использую Vue DropZone для загрузки фотографий. В настоящее время у меня есть предварительно загруженное изображение в Dropzone. Мне удается добиться этого, ссылаясь на компонент vueDropZone и вызывая метод manualAddFile (file, url) вручную. Однако у меня возникают проблемы с изменением размера предварительно загруженного изображения, чтобы оно соответствовало размеру миниатюры, которая имеет размер 160 х 160 пикселей. Я пытался применить следующий класс CSS, но он не работает 

.dz-image img {
  width: 100%;
  height: 100%;
}

Просто, чтобы дать более ясную картину, я предоставлю свой код и несколько скриншотов того, чего я хочу достичь. 

    <template>
  <div>
    <vue-dropzone id="dropzone" ref="myVueDropzone" :options="dropOptions" :useCustomSlot="true">
      <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>
    </vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  components: {
    vueDropzone
  },
  data() {
    return {
      /* This is similar to configuration options in dropzone.js */
      dropOptions: {
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160,
        thumbnailHeight: 160
      }
    };
  },

  mounted() {
    var file = {
      // Specify the file size and type of file
      size: 160,
      type: "image/jpeg"
    };
    var url = require("../assets/child.jpeg");
    this.$refs.myVueDropzone.manuallyAddFile(file, url);
  }
};
</script>

<style>
</style>

Это размер предварительно загруженной фотографии enter image description here

Это размер предварительно загруженной фотографии по сравнению с загруженной пользователем фотографией. По сути, я хочу, чтобы предварительно загруженная фотография соответствовала загруженной пользователем фотографии размером 160 x 160 px. enter image description here

...