html - 在 Rails 应用程序中提交之前修改表单数据

Question

我有一个表单，其中有一些字段和input[file]元素。我正在使用Cropper.js裁剪图像。我在这里面临的问题是文件输入具有原始图像，但是在提交表单之前我无法将新裁剪的图像附加到表单数据中。

const readURL = function (input, target, preview, form_id) {
 let image = document.querySelector(preview);
 let file = document.querySelector(input).files[0];
 let cropper_canvas, imgSrc, reader, imgFile;
 if (file) {
  reader = new FileReader();
  reader.onload = (e) => {
   image.src = e.target.result;
   cropper_canvas = new Cropper(image);
  };
  reader.readAsDataURL(file);
 }

 $("#crop-button").click((e) => {
  imgSrc = cropper_canvas.getCroppedCanvas({ width: 300 }).toDataURL();
  cropper_canvas.getCroppedCanvas({ width: 300 }).toBlob(function(blob){
   imgFile = blob;
  });
  $(target).css("background-image", imgSrc);
  $(target).attr("style", `background-image: url(${imgSrc})`);

  $(`#edit_counselor_${form_id}`).submit(function () {
    var formData = new FormData(document.querySelector(`#edit_counselor_${form_id}`))
    formData.append("counselor[profile_image]", imgFile);
    return true;
  });
 });
};