Fine Uploader - 如何在调用reset（）后设置粘贴处理？

Question

我用它来初始化一个新的FineUploader实例：

this.uploader = new FineUploader({
  element: this.fileUpload.nativeElement,
  template: 'qq-simple-thumbnails-template',
  form: {
    interceptSubmit: false
  },
  paste: {
    targetElement: this.fileUpload.nativeElement
  }
});

我应该提到我正在使用Angular，所以我通过@ViewChild（'fileUpload'）fileUpload访问容器。

模板（非常类似于默认值）：

<div style="visibility: hidden" id="qq-simple-thumbnails-template">
  <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop or Paste Files Here">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
      <span class="qq-upload-drop-area-text-selector"></span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
      <div>Upload a file</div>
    </div>
    <span class="qq-drop-processing-selector qq-drop-processing">
      <span>Processing dropped files...</span>
      <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
      <li>
        <div class="qq-progress-bar-container-selector">
          <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
        </div>
        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
        <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
        <span class="qq-upload-file-selector qq-upload-file"></span>
        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
        <span class="pull-right">
          <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
          <span class="qq-upload-size-selector qq-upload-size"></span>
          <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Remove</button>
          <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
        </span>
      </li>
    </ul>
    <dialog class="qq-alert-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Close</button>
      </div>
    </dialog>
    <dialog class="qq-confirm-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">No</button>
        <button type="button" class="qq-ok-button-selector">Yes</button>
      </div>
    </dialog>
    <dialog class="qq-prompt-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <input type="text">
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Cancel</button>
        <button type="button" class="qq-ok-button-selector">Ok</button>
      </div>
    </dialog>
  </div>
</div>

我需要重置已上传到库的文件，我找到的唯一方法就是使用this.uploader.reset（）。我尝试循环遍历从getUploads（）返回的内容并使用id然后调用removeFileRef（id）并且没有从UI中删除它们。

问题是，一旦我调用reset（），就会删除粘贴处理而不会添加回来。它似乎是故意的：https://github.com/FineUploader/fine-uploader/blob/master/client/js/paste.js#L44

Answer 1

遗憾的是，如果没有维护者的支持，就无法正确重置粘贴处理程序。

但是，由于JavaScript的动态特性，我们可以破解fineuploader的实现。

const old = qq.PasteSupport
   if (old) {
        qq.PasteSupport = function (o) {
        var self = this
        old.call(self, o)
        self.reset = function() {}
   }
}

我相信pasteHandler的当前重置行为是https://github.com/FineUploader/fine-uploader/issues/1293的错误修复。

原始问题1293是用户删除粘贴目标元素但不能删除处理程序。但是，reset并不意味着用户将删除粘贴目标。理想情况下，他们应该调用destroy精细上传方法而不是reset。但精细上传器根本没有这样的方法！