Блог

Я создал компонент vue dropzone, используя dropzonejs. Компонент работает, однако я не могу настроить dropzone для загрузки файлов размером более 256 МБ, что, по моему мнению, является значением по умолчанию. Для целей тестирования я поставил 1 МБ(уменьшив максимальный размер файла).

Я также попытался поместить свой код конфигурации в смонтированный перед монтированием, созданием и т. Д.

Мой Код

 <template>
  <div class="dropzone-container">
    <form
      :action="uploadurl"
      class="dropzone drop-area"
      enctype="multipart/form-data"
      id="myDropzone"
      ref="myDropzone"
      :key="`dz-${dzkey}`"
    >
      <input type="hidden" name="path" :value="currentPath" />
    </form>
    <button class="finish-button" @click="finishUpload">Finish Upload</button>
  </div>
</template>

<script>
// import * as Dropzone from "dropzone/dist/min/dropzone.min.js";
import FileHandling from "../fileHandling";
const Dropzone = require("dropzone/dist/dropzone.js");
Dropzone.autoDiscover = true;
export default {
  name: "DropZone",
  props: ["currentPath"],
  data() {
    return {
      uploadurl: FileHandling.SendForUpload(),
      dzkey: 0,
    };
  },
  methods: {
    finishUpload() {
      this.$refs.myDropzone.dropzone.removeAllFiles();
      this.$emit("finishedUpload");
    },
    dropconfig() {
      console.log(Dropzone);
      Dropzone.options[this.$refs.myDropzone] = {
        maxFilesize: 1,
      };
    },
  },
  ready: function() {
    this.dropconfig();
  },
};
</script>
 

В вашем коде есть две проблемы:

1. ready Крючка нет. Возможно, вы имели в виду mounted :

    export default {
     // ❌ ready hook does not exist
     //ready() {
     //  this.dropconfig();
     //},
   
     // ✅
     mounted() {
       this.dropconfig();
     }
   }
    

2. Dropzone.options представляет собой карту идентификаторов элементов (строк), а не экземпляров элементов ( HTMLElement ):

    // ❌
   //Dropzone.options[this.$refs.myDropzone] = {/*...*/};
   
   // ✅ `myDropzone` is a string that matches element ID in template
   Dropzone.options.myDropzone = {/*...*/};
    

Устранение этих проблем должно позволить вашей maxFilesize конфигурации вступить в силу.