一、前言

element ui 已經(jīng)提供了文件上傳的組件，直接拿來就能用。具有以下幾個(gè)特點(diǎn)：

限制文件上傳的個(gè)數(shù)，多個(gè)文件會(huì)發(fā)起多個(gè)請求。

可以設(shè)置文件選擇后自動(dòng)上傳或者手動(dòng)觸發(fā)上傳，并且手動(dòng)觸發(fā)可以自定義上傳邏輯。

可以限制文件格式和大小，比如：jpeg等之類的。

設(shè)置縮略圖模板。

控制文件列表

二、代碼及注意事項(xiàng)

ref="upload"

action="" // 注意點(diǎn)一

:multiple="false"

:auto-upload="false" //注意點(diǎn)二

:limit="2" //注意點(diǎn)三

accept=".csv" //注意點(diǎn)四

:on-change="handleChange"

:before-upload="beforeUpload"

:http-request="submitFile" //注意點(diǎn)五

:file-list="fileList"

:on-exceed="onExceed" //注意點(diǎn)六

>

選取文件

只能上傳csv文件

style="margin-left: 10px;"

type="success"

@click="selectFile" //注意點(diǎn)七

>提 交

關(guān)于el-upload 組件提醒以下幾點(diǎn)點(diǎn)：

注意點(diǎn)一? ? action=""

此屬性必填，值為上傳路徑url。

注意點(diǎn)二：:auto-upload="false"

表明手動(dòng)觸發(fā)上傳文件的行為，當(dāng) 點(diǎn)擊選擇文件只是選擇文件，當(dāng)點(diǎn)擊 提交 按鈕時(shí) 才會(huì)真正的上傳。

注意點(diǎn)三： :limit=2“”

限制文件上傳個(gè)數(shù)為2

注意點(diǎn)四：accept=".csv"

當(dāng)你選擇文件時(shí)，默認(rèn)在彈出框中過濾只顯示.csv文件，當(dāng)然你可以手動(dòng)切換過濾的格式，仍然可以選擇其他文件，

所以這種方法不能嚴(yán)格保證上傳格式符合要求，需要在上傳的時(shí)候再次校驗(yàn)。

注意點(diǎn)五：:http-request="submitFile"

此屬性只有在:auto-upload="false" 才會(huì)生效，表示手動(dòng)觸發(fā)時(shí)將會(huì)覆蓋默認(rèn)上傳的邏輯，

同時(shí)action="url"也會(huì)失效。所以，你可以在 submitFile 方法里實(shí)現(xiàn)一些業(yè)務(wù)邏輯。比如，根據(jù)不同的參數(shù)選擇不同的url上傳。

注意點(diǎn)六：:on-exceed="onExceed"

超過限制的文件數(shù)量時(shí)，回調(diào)的方法，可以給出提示。

三、問題及經(jīng)驗(yàn)

下面說說我遇到的問題

1. 如何實(shí)現(xiàn)手動(dòng)觸發(fā)文件上傳。

前面已經(jīng)說了幾個(gè)關(guān)鍵點(diǎn)：http-request，auto-upload, action

如果 :auto-upload=“false” 就是手動(dòng)觸發(fā)，進(jìn)一步，如果 :http-request="submitFile" ，那么提交時(shí)將會(huì)覆蓋默認(rèn)的上傳行為，走submitFile方法邏輯。貼下我的代碼：

selectFile() {

if (this.fileObj == null) {

this.$message.error('請選擇文件')

}

this.$refs.upload.submit()

console.log('發(fā)送文件..')

},

其中，this.$refs.upload.submit() 便會(huì)去調(diào)用自定義的submitFile方法。 注意哦，selectFile是 提交 按鈕的事件。那真正的請求邏輯是submitFile，此時(shí)action=“url”也將失效。我采用了表單提交的方式，并且不同根據(jù)不同的參數(shù)，調(diào)用不同的url。

submitFile(item) {

this.fileObj = item.file

const formData = new FormData()

formData.append('file', this.fileObj)

if (this.type === 'USER') {

importUser(this.$store.state.user.id, formData)

}

if (this.type === 'ORG') {

importOrg(this.$store.state.user.id, formData)

}

},

2. 嚴(yán)格限制上傳文件的格式：

前面說過可以用accept 屬性，但是不能夠嚴(yán)格保證，只是在文件選擇時(shí)候根據(jù)文件后綴名進(jìn)行過濾而已。所以，上傳之前需要校驗(yàn)，在before-upload回調(diào)方法里進(jìn)行邏輯處理：

beforeUpload(file) {

const iscsv = file.type === 'application/vnd.ms-excel'

if (!iscsv) {

this.$message.error('只支持csv格式的文件!')

}

return iscsv

},

那我怎么知道文件類型是什么？？可以通過方法里面的file參數(shù)知道關(guān)于此文件的所有信息。此方法返回false，將不會(huì)上傳，并丟棄此文件。

3. 只能上傳一個(gè)文件，并且再次選擇時(shí)候覆蓋第一個(gè)文件。

limit="1" 可以限制只能上傳一個(gè)文件，當(dāng)再次選擇文件時(shí)，將會(huì)觸發(fā) on-exceed 回調(diào)方法(如果你綁定了此方法)，然后就結(jié)束后續(xù)操作了。不能滿足需求。

實(shí)現(xiàn)方案1：

在on-exceed方法里提示用戶，讓用戶先刪除原來的文件列表，然后就可以再次上傳新文件了。

onExceed(file, fileList) {

this.$message.error('只能上傳一個(gè)文件，請先刪除已有文件!')

},

第一個(gè)file參數(shù)，是當(dāng)前選中的文件，第二個(gè)參數(shù)fileList為已經(jīng)選中的文件列表。

實(shí)現(xiàn)方案二：

在用戶選擇時(shí)，默認(rèn)刪除第一個(gè)文件，這樣無論上傳多少個(gè)文件，都只會(huì)保留最后一次選擇的文件。關(guān)鍵點(diǎn)：綁定handle-change 事件，將fileList中的第一個(gè)文件刪除。代碼如下：

handleChange(file, fileList) {

if (fileList.length > 1) {

this.$refs.upload.handleRemove(fileList[0])

}

console.log(fileList)

},

當(dāng)采用這種方案時(shí)，頁面上會(huì)有出現(xiàn)文件刪除和增加的動(dòng)畫效果，個(gè)人覺得不是很好，因此，需要除去此效果，網(wǎng)上找尋一波，以下方法經(jīng)受住了我的考驗(yàn)，和大家分享下：

/deep/ .el-list-enter-active,

/deep/ .el-list-leave-active {

transition: none;

}

/deep/ .el-list-enter,

/deep/ .el-list-leave-active {

opacity: 0;

}

以上便是在使用el-upload組件上傳時(shí)的使用方法和心得，建議一定要好好閱讀官方文檔的實(shí)例，基本都能滿足我們的需求。寫的不詳細(xì)的地方，一定要去看官網(wǎng)哦，文檔都寫了，睜大眼睛，傳送帶：?https://element.eleme.cn/#/zh-CN/component/upload

總結(jié)

以上是生活随笔為你收集整理的element vue 上传模板_vue+element 文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。