Vue 上傳材料（使用input）

最近工作中接到一個需求，需要上傳一個文件材料，提交時傳給后端。使用的框架是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接口的傳參類型（要注意是不是data）