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