<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>