如何使用 vue js 3 增加 dropzone js 的文件上传大小

Question

我使用 dropzonejs 制作了一个 vue dropzone 组件。该组件可以工作，但是我无法将 dropzone 配置为上传大于 256mb 的文件，我认为这是默认设置。出于测试目的，我放了 1mb（减少最大文件大小）。

我还尝试将我的配置代码放入mounted beforeMount、create等中。

我的代码

<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>

Answer 1

您的代码中有两个问题：

1. 没有ready 钩子。也许你的意思是mounted：

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

2. Dropzone.options 是元素 ID（字符串）的映射，而不是元素实例 (HTMLElement)：

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

修复这些问题应该可以让您的 maxFilesize 配置生效。