更改 dropzone.js 和 rails 的错误文本

如何解决更改 dropzone.js 和 rails 的错误文本

我正在创建一个放置区，现在显示一个错误，文件太大，指示其大小为 MiB 格式，我需要将其更改为 MB，但我没有找到如何操作。下面我附上我的 dropzone 控制器和轨道应用程序的部分视图。如有任何解决方案，我将不胜感激。

dropzone_controller.js

import Dropzone from "dropzone";
import { Controller } from "stimulus";
import { DirectUpload } from "@rails/activestorage";
import {
  getMetaValue,toArray,findElement,removeElement,insertAfter
} from "helpers";

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

  connect() {
    this.dropZone = createDropZone(this);
    this.hideFileInput();
    this.bindEvents();
    Dropzone.autoDiscover = false; // necessary quirk for Dropzone error in console
  }

  // Private
  hideFileInput() {
    this.inputTarget.disabled = true;
    this.inputTarget.style.display = "none";
  }

  bindEvents() {
    this.dropZone.on("addedfile",file => {
      setTimeout(() => {
        file.accepted && createDirectUploadController(this,file).start();
      },500);
    });

    this.dropZone.on("removedfile",file => {
      file.controller && removeElement(file.controller.hiddenInput);
    });

    this.dropZone.on("canceled",file => {
      file.controller && file.controller.xhr.abort();
    });
  }

  get headers() {
    return { "X-CSRF-Token": getMetaValue("csrf-token") };
  }

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

  get maxFiles() {
    return this.data.get("maxFiles") || 1;
  }

  get maxFileSize() {
    return this.data.get("maxFileSize") || 256;
  }

  get acceptedFiles() {
    return this.data.get("acceptedFiles");
  }

  get addRemoveLinks() {
    return this.data.get("addRemoveLinks") || true;
  }
}

class DirectUploadController {
  constructor(source,file) {
    this.directUpload = createDirectUpload(file,source.url,this);
    this.source = source;
    this.file = file;
  }

  start() {
    this.file.controller = this;
    this.hiddenInput = this.createHiddenInput();
    this.directUpload.create((error,attributes) => {
      if (error) {
        removeElement(this.hiddenInput);
        this.emitDropzoneError(error);
      } else {
        this.hiddenInput.value = attributes.signed_id;
        this.emitDropzoneSuccess();
      }
    });
  }

  createHiddenInput() {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = this.source.inputTarget.name;
    insertAfter(input,this.source.inputTarget);
    return input;
  }

  directUploadWillStoreFileWithXHR(xhr) {
    this.bindProgressEvent(xhr);
    this.emitDropzoneUploading();
  }

  bindProgressEvent(xhr) {
    this.xhr = xhr;
    this.xhr.upload.addEventListener("progress",event =>
      this.uploadRequestDidProgress(event)
    );
  }

  uploadRequestDidProgress(event) {
    const element = this.source.element;
    const progress = (event.loaded / event.total) * 100;
    findElement(
      this.file.previewTemplate,".dz-upload"
    ).style.width = `${progress}%`;
  }

  emitDropzoneUploading() {
    this.file.status = Dropzone.UPLOADING;
    this.source.dropZone.emit("processing",this.file);
  }

  emitDropzoneError(error) {
    this.file.status = Dropzone.ERROR;
    this.source.dropZone.emit("error",this.file,error);
    this.source.dropZone.emit("complete",this.file);
  }

  emitDropzoneSuccess() {
    this.file.status = Dropzone.SUCCESS;
    this.source.dropZone.emit("success",this.file);
    this.source.dropZone.emit("complete",this.file);
  }
}

function createDirectUploadController(source,file) {
  return new DirectUploadController(source,file);
}

function createDirectUpload(file,url,controller) {
  return new DirectUpload(file,controller);
}

function createDropZone(controller) {
  return new Dropzone(controller.element,{
    url: controller.url,headers: controller.headers,maxFiles: controller.maxFiles,maxFilesize: controller.maxFileSize,acceptedFiles: '.jpg,.jpeg,.png,.gif',addRemoveLinks: controller.addRemoveLinks,autoQueue: false
  });

}

rails_view

<div class="form-group inverted">
              <%= form.label :image,"Upload test execution results",class: "form-label" %>
              <button type="button" class="dropzone dropzone-default dz-clickable form-control form-file form-file-btn" data-controller="dropzone" data-dropzone-max-file-size="10" data-dropzone-max-files="1">
                <%= form.file_field :image,direct_upload: true,data: { target: 'dropzone.input' } %>
                <div class="dropzone-msg dz-message needsclick flex m-0">
                  <span class="icon text-icon-lg icon-file-image-plus-lg mr-3"></span>
                  <div class="text-left mt-0">
                    <p>Upload a file or drag and drop</p>
                    <p class="text-xs">PNG,JPG,GIF up to 10MB</p>
                  </div>
                </div>
              </button>
            </div>