Vue拖拽上传时通过ref设置file input的files后@change事件未触发怎么办

问题原因 #

通过JavaScript手动为input[type="file"]的files属性赋值属于程序修改操作，浏览器默认不会自动触发原生change事件，只有用户通过点击控件手动选择文件的交互行为才会自动触发该事件。

解决方法 #

你可以选择两种方案实现需求，推荐优先选择第二种方案，和原生交互逻辑完全对齐：

• 方案1：直接在onDrop中调用文件处理逻辑
  不需要触发change事件，直接将拖拽拿到的文件传给onFileSelect函数即可，代码修改如下：

  onDrop(e) {
    // 必须先阻止默认行为，避免浏览器直接打开拖拽的文件
    e.preventDefault();
    e.stopPropagation();
    const files = e.dataTransfer.files;
    this.$refs.FileInput.files = files;
    // 直接调用处理函数，构造兼容的事件参数
    this.onFileSelect({ target: { files } });
    console.log("Yes", this.$refs.FileInput.files);
  }
  

  同时需要给拖拽区域添加dragover事件的默认行为阻止，否则drop事件可能无法正常触发：

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

• 方案2：手动派发原生change事件
  如果你需要和原生选择文件的行为完全一致，让绑定的@change事件自动触发，可以手动给input元素派发change事件，不需要修改onFileSelect的原有逻辑：

  onDrop(e) {
    e.preventDefault();
    e.stopPropagation();
    const fileInput = this.$refs.FileInput;
    fileInput.files = e.dataTransfer.files;
    // 手动创建并派发change事件
    const changeEvent = new Event('change');
    fileInput.dispatchEvent(changeEvent);
    console.log("Yes", fileInput.files);
  }
  

  同样需要添加@dragover.prevent到拖拽区域的属性中。

内容的提问来源于stack exchange，提问作者Parth Sahu