element-ui中上傳文件upload

<el-upload
class="upload-demo"

name="targetFile"

ref="upload"

:with-credentials="true"
:limit="5"
:file-list="fileList"
:data="myData"
:action="uploadUrl()"
:headers="myHeader"
:on-change="addFile"
:on-remove="removeFile"
:auto-upload="false"
>
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
---------------------
element-ui文件上傳過程當中，遇到的問題

首先搞清楚文件上傳通常的請求方式都是post請求

請求攜帶的參數是經過name屬性來指定鍵名的：例如 name="targetFile"

ref綁定的是當前文件上傳表單，未來能夠經過this.$refs.upload.submit()請求上傳文件的URL

:with-credentials="true"表明支持發送 cookie 憑證信息

 ：limit表明最大支持的文件上傳個數

:file-list 是本身上傳的文件列表，裏面包含了本身上傳的文件

:data設置上傳攜帶的其餘數據例如id，type

:headers設置請求頭通常設置的是token值（在vue的計算屬性中添加）

：action是指後臺提交的地址

:on-change會在文件添加的時候去掉用addFile方法

:on-remove文件列表移除文件時的鉤子

:auto-upload是否自動提交，取值爲布爾值

當遇到有的時候文件上傳是包含在一個表單裏面，使用element-ui的upload上傳組件，想實現的是在我點擊上傳選擇文件後不讓它自動提交，而是在我點擊肯定後，通過一系列的驗證再提交。並且element-ui的upload組件上傳的路徑跟表單保存的路徑是不同的

這個過程當中的注意點：

1.文件上傳的地址和表單提交的地址不一樣

2.文件上傳的時機應該在表單校驗成功以後

3.表單提交以後清空文件和表單數據

4.對話框格式的書寫

<el-dialog title="上傳文件" :visible.sync="dialogFormVisible" width="40%">
<el-form :model="form" status-icon :rules="rules" ref="form">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item label="上報機構:" :label-width="formLabelWidth" prop="organization">
<el-input v-model="form.organization" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item label="上傳文件:" :label-width="formLabelWidth">
<el-upload>
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="insert('form')">確 定</el-button>
</div>

</el-dialog>