element-ui中上傳檔案upload

發表於2019-04-02

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

相關文章