技術標籤：javascriptvue.jshtml5

先大概瞭解一下這個元件的屬性和方法：

action：看官網就知道了，指定上傳的路徑，但是一般vue專案裡我們的請求路徑不會寫在這裡。
show-file-list：是否顯示你上傳的檔案，true的話它會在一個ul裡顯示
before-upload：顧名思義，上傳之前的一些操作，我把校驗寫在這裡了。
注意：:auto-upload="false"時before-upload不生效，所以她兩選擇一個便好。

 beforeUpload(file) {
        const Xls = file.name.split
 
('.'); 
         if(Xls[1] === 'xls'||Xls[1] === 'xlsx'||Xls[1] === 'csv'){
            return file
         }else {
            this.$message.error('請上傳excel格式的檔案!')
            return false
         }
      },

http-request：如果不用action，則在該方法裡寫請求

 // 上傳檔案
      uploadFile(file,fileList) {
         const
 
 fdata = new FormData()
          fdata.append('file', file.file)
          console.log(file.file)
          //這裡寫axios請求，
          server.orderUpload(fdata).then(res=>{
            this.$message.success('匯入成功')
           }).catch(err=>{
             this.$message.error('匯入失敗')
          })
      }
 
,

on-success:上傳成功之後的操作，拿到資料在頁面顯示。

handleSuccess(res, file, fileList) {
        // console.log(res, file, fileList)
      //   this.$message.success('檔案上傳成功')
      },