Vue - 使用 ref 设置文件时，文件输入元素的 @change 未触发 - 拖放文件上传

Question

我有一个用于拖放图片上传的文件输入。

    <input
          type="file"
          ref="FileInput"
          style="display: none;"
          @change="onFileSelect"
          accept=".jpg,.jpeg,.png,.tiff,.webp"
        />

更改时触发 OnFileSelect 函数。

onFileSelect(e) {
      console.log("came here");
      const file = e.target.files[0];
      ...
      ...
      // here the code sends the files to be uploaded in server
}

有一个包含输入字段的放置区：

<div
      ref="dropZone"
      @drop="onDrop($event)"
      @click="$refs.FileInput.click()"
    >

onDrop函数如下：

onDrop(e) {
      this.$refs.FileInput.files = e.dataTransfer.files;
      //this changes fileList in input but the onChange in input field is not triggered
      console.log("Yes", this.$refs.FileInput.files);
    },

虽然当我将图像文件放入拖放区时触发了 onDrop 并且输入中的文件列表也发生了变化，但在 onDrop 函数之后没有调用函数 onFileSelect（应在输入更改时触发）。我怎样才能做到这一点？提前致谢！

Answer 1

onChange 输入类型文件的事件不会在 dropEnd.

上触发

相反，您必须修改当前的 onChange 方法。这样你就可以使用相同的代码来结束。

像这样更新您的 onFileSelect 方法：

onFileSelect(e) {
      console.log("came here");
      const file = e.target.files[0];

      uploadFile(file) // this method will be responsible for uploading file to server. Move all code written in onFileSelect to this method.
}

现在在 DropEnd 上，只需使用文件参数调用此方法。

onDrop(e) {
     uploadFile(e.dataTransfer.files[0])
    },

Vue - 使用 ref 设置文件时，文件输入元素的 @change 未触发 - 拖放文件上传

Vue - File input element's @change not triggered when its files are set using ref - drag and drop file upload

html

javascript

drag-and-drop

file-upload

vue.js