vue上傳文件（原生方法）

前言：

• 組件庫的文件上傳不適合項目，這里我們利用input標簽實現文件上傳
• 首先input type=file  標簽是這個亞子的，而且樣式不能改，我們利用css的方法，將一個定位到這個下面來，然后input標簽opcity:0，就哦了

 

用法：

• input的accept屬性，支持選擇的文件類型，win系統上，如果不是這個類型的文件，選擇文件的時候是看不到的，並綁定ref屬性
• 利用inut的change事件，當選擇文件的時候觸發change事件，通過ref屬性找到選擇的文件對象（如下圖），自己嘗試着打印試試，這個就是后端需要的文件（包括文件名，大小等)
• 然后上傳文件的時候需要 new FormData() 得到實例對象，然后往這個實例對象里面append添加屬性就好了，這里的屬性就是后台需要的參數，調用接口即可
• 必要的時候清空input的value，因為我們把input通過css opcity:0,看不到了，例如我們上傳成功后應當清空input的value，如果不清空的話，其實選擇的文件還是在的

<div class="selectfile">選擇文件</div>
<input accept=".xlsx" type="file" ref="file" @change="selectFile" />

// 選擇文件
    selectFile(e) {
      console.log(this.$refs['file'].files[0])
      if (this.$refs['file'].files[0]) {
        this.filename = this.$refs['file'].files[0].name
        this.selectFileobj = this.$refs['file'].files[0]
      } else {
        this.Toleadform.filename = ''
      }
    }

    // 上傳按鈕
    async Tofileupload() {
      if (this.selectFileobj) {
        let fd = new FormData()
        fd.append('file', this.selectFileobj)
        fd.append('userId', this.userInfo.userId)
           const res = await importExcel(fd)     // 調用接口實現文件上傳
      } else {
        this.$message.warning('請選擇要上傳的文件')
      }
    }

    this.$refs['file'].value = ''             // 必要的時候記得將選擇的文件清空