今天寫一個檔案上傳的功能，開始想用element-ui的元件寫，但是發現不知道怎麼把檔案標題和內容一起上傳，所以用了經典的input框上傳。

廢話不多說，直接上程式碼。

這是表單：

<el-form :model="fileForm" :rules="rules" ref="fileForm" label-width="80px">
              <el-form-item label="標題" prop="title">
                <el-input v-model="fileForm.title" placeholder
 
="請輸入標題"></el-input>
              </el-form-item>
              <el-form-item label="內容" prop="msg">
                <el-input type="textarea" v-model="fileForm.msg" placeholder="請輸入資訊"></el-input>
              </el-form-item>
              <el-form-item label
 
="選擇檔案" prop="file">
                <el-input type="file" v-model="fileForm.file"></el-input>
              </el-form-item>
</el-form>

點選上傳按鈕提交請求：

　　　　　　　var formData = new FormData()
            var file = document.querySelector('input[type=file]').files[0]
            formData.append('file', file)
            formData.append('bucketname', 'bbfe')
            formData.append('title', this.fileForm.title)
            formData.append('msg', this.fileForm.msg)
            this.$axios.post('/bbfe/s3/file', formData).then((res) => {
              if (res.data.code === 1) {
                this.$message.success('上傳成功！')
                this.$refs.fileTable.getFileList()
              } else {
                this.$message.error('上傳失敗！')
              }
              this.dialogVisible = false
            }).catch((err) => {
              console.log(err)
            })

　　提交時是把formData傳給後臺，不是把 fileForm 提交。