最近工作中接到一個需求，需要上傳一個檔案材料，提交時傳給後端。使用的框架是Vue，廢話不說直接上程式碼

<template>
  <div>
    <input type="file" @change="inputFileChange"> 
    <button type="primary" size="mini" @click="clicks">上傳<button>
  </div>
</template>

以下為邏輯部分（JavaScript的部分）

<script>
import submitfile from "xxxxxx" //要傳的後端介面
export default {
  data () {
    return {
      files:''
    }
  },
methods: {
inputFileChange(e){
this.files = e.target.files[0] //當input中選擇檔案時觸發一個事件並讓data當中的files拿到所選擇的檔案
},
click() {
if（!this.files）{
console.log('請選擇檔案')
return
let fd = new FormData()
fd.append('file',this.files)
submitfile(fd).then(res => {
          
        })

}
} 
}
</script>

以上是主要的程式碼，還可以對input所選擇的檔案進行篩選，可以設定選擇檔案的型別。

只能選擇Excel檔案的程式碼為如以下：

 <input
        ref="fileInput"
        type="file"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        @change="handleFileUpload"
      >

可以定義input的accept屬性限制更多的檔案型別

還有分享一個自己踩過的坑：

1.不能將files直接當成給介面傳的引數，必須要用formdata

2.定義介面檔案中，要注意post介面的傳參型別（要注意是不是dat