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