TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

    这个标题也是很low了，但是想着大家遇到这个错之后，肯定都想这样直接搜索就找到答案。其实大家应该是和我一样，就是想将type="file"类型的控件置空，或者说reset。如果只是单纯的将value置空，那么虽然没有文件名了，但是files属性值依然在，我在网上搜了不少，终于找到了答案（Posted on 2012-02-22），原文作者发表于2012年啊，jquery时代，到了现在2020年，vue时代了，依然可以解决问题，不得不感叹，真是前人栽树，后人乘凉，谢谢！！

 

    ---------------------问题-introduce[介绍]---------------------------------

    问题描述：在用Vue开发导入文件功能时，想完成导入之后，清空文件的功能，结果清不掉了。

    TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

    翻译过来是：TypeError:未能在“HTMLInputElement”上设置“files”属性：提供的值不是“FileList”类型。

<input id="impotFiles" type="file" value="1"  ref="impotFiles" @change="importEvent()">

//以下为js代码
//此句会报错，原因是出于安全限制，file 的value 是只读的，只能由用户选择或手动输入，不允许由程序代码设置，所以在JS中修改 file 的 value 会爆出此错误信息。
              this.$refs.impotFiles.files = "";

 

 -------------------------------问题-solve[解决]----------------------------------

 

// 清空文件上传控件
// 不能直接用js修改input type=file的value，但可以通过form的reset()清空它的值
// 解决：将input type=file放进一个临时form，清空value,再将它移到原来位置
 this.emptyFileUpload($('#impotFiles'));

// 以下为methods中的方法
 emptyFileUpload(selector) {
      var fi;
      var sourceParent;
      if (selector) {
        fi = $(selector);
        sourceParent = fi.parent();
      }
      else {
          return;
      }
      $("<form id='tempForm'></form>").appendTo(document.body);
      var tempForm = $("#tempForm");
      tempForm.append(fi);
      tempForm.get(0).reset();
      sourceParent.append(fi);
      tempForm.remove();
  }

 

     以上，问题就解决了，虽然仍然用的jquery。。。在vue里用jquery还是感觉怪怪的，怎么用vue来解决这个问题，我还不知道。各位小伙伴~有知道的，记得评论哦~~谢啦!!☆⌒(*＾-゜)v