为什么 dropzoneJS 调整大小选项没有影响？答案

【问题标题】：Why are dropzoneJS resize options having no affect?为什么 dropzoneJS 调整大小选项没有影响？
【发布时间】：2021-07-19 05:08:18
【问题描述】：

我在带有 ActiveStorage 和 Stimulus 的 rails 6 应用程序中有放置区。但是，resizeHeight 和 resizeQuality 似乎对上传的图片没有任何影响。

在下图所示的设置中，我希望最终图像小且质量低。但是，我得到了我最初附加的相同图像。完全没有压缩或大小变化。

另外，我很好奇 DropzoneJS 是否会升级？或者，如果默认情况下它不会升迁？此外，跳过非图像的调整大小选项是否足够聪明？文档没有具体说明。

我的 Dropzone_controller 如下所示：

import { Controller } from "stimulus"
import Dropzone from "dropzone"
import 'dropzone/dist/min/dropzone.min.css'
import 'dropzone/dist/min/basic.min.css'
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["input"]

  connect() {
    Dropzone.autoDiscover = false

    this.inputTarget.disable = true
    this.inputTarget.style.display = "none"
    const dropzone = new Dropzone(this.element, {
      url: '/',
      maxFiles: 10,
      maxFilesize: 6,
      addRemoveLinks: true,
      resizeHeight: 50,
      resizeQuality: 0.1,
      autoQueue: false
    })

    dropzone.on("addedfile", file => {
      setTimeout(() => {
        if (file.accepted) {
          const upload = new DirectUpload(file, this.url)
          upload.create((error, blob) => {
            this.hiddenInput = document.createElement("input")
            this.hiddenInput.type = "hidden"
            this.hiddenInput.name = this.inputTarget.name
            this.hiddenInput.value = blob.signed_id
            this.inputTarget.parentNode.insertBefore(this.hiddenInput, this.inputTarget.nextSibling)
            dropzone.emit("success", file)
            dropzone.emit("complete", file)
          })
        }
      }, 500)
    })
  }

  get url() {
    return this.inputTarget.getAttribute('data-direct-upload-url')
  }
}

谢谢！！！！

【问题讨论】：

标签： dropzone.js ruby-on-rails-6

【解决方案1】：

resizeWidth 和 resizeHeight 无效，因为设置 autoqueue: false 会绕过 Dropzone 源代码的这一部分。

【讨论】：