element vue 上传模板_vue+element 文件上传
一、前言
element ui 已經(jīng)提供了文件上傳的組件，直接拿來就能用。具有以下幾個特點：
限制文件上傳的個數(shù)，多個文件會發(fā)起多個請求。
可以設(shè)置文件選擇后自動上傳或者手動觸發(fā)上傳，并且手動觸發(fā)可以自定義上傳邏輯。
可以限制文件格式和大小，比如：jpeg等之類的。
設(shè)置縮略圖模板。
控制文件列表
二、代碼及注意事項
ref="upload"
action="" // 注意點一
:multiple="false"
:auto-upload="false" //注意點二
:limit="2" //注意點三
accept=".csv" //注意點四
:on-change="handleChange"
:before-upload="beforeUpload"
:http-request="submitFile" //注意點五
:file-list="fileList"
:on-exceed="onExceed" //注意點六
>
選取文件
只能上傳csv文件style="margin-left: 10px;"
type="success"
@click="selectFile" //注意點七
>提 交
關(guān)于el-upload 組件提醒以下幾點點：
注意點一? ? action=""
此屬性必填，值為上傳路徑url。
注意點二：:auto-upload="false"
表明手動觸發(fā)上傳文件的行為，當(dāng) 點擊選擇文件只是選擇文件，當(dāng)點擊 提交 按鈕時 才會真正的上傳。
注意點三： :limit=2“”
限制文件上傳個數(shù)為2
注意點四：accept=".csv"
當(dāng)你選擇文件時，默認(rèn)在彈出框中過濾只顯示.csv文件，當(dāng)然你可以手動切換過濾的格式，仍然可以選擇其他文件，
所以這種方法不能嚴(yán)格保證上傳格式符合要求，需要在上傳的時候再次校驗。
注意點五：:http-request="submitFile"
此屬性只有在:auto-upload="false" 才會生效，表示手動觸發(fā)時將會覆蓋默認(rèn)上傳的邏輯，
同時action="url"也會失效。所以，你可以在 submitFile 方法里實現(xiàn)一些業(yè)務(wù)邏輯。比如，根據(jù)不同的參數(shù)選擇不同的url上傳。
注意點六：:on-exceed="onExceed"
超過限制的文件數(shù)量時，回調(diào)的方法，可以給出提示。
三、問題及經(jīng)驗
下面說說我遇到的問題
1. 如何實現(xiàn)手動觸發(fā)文件上傳。
前面已經(jīng)說了幾個關(guān)鍵點：http-request，auto-upload, action
如果 :auto-upload=“false” 就是手動觸發(fā)，進(jìn)一步，如果 :http-request="submitFile" ，那么提交時將會覆蓋默認(rèn)的上傳行為，走submitFile方法邏輯。貼下我的代碼：
selectFile() {
if (this.fileObj == null) {
this.$message.error('請選擇文件')
}
this.$refs.upload.submit()
console.log('發(fā)送文件..')
},
其中，this.$refs.upload.submit() 便會去調(diào)用自定義的submitFile方法。 注意哦，selectFile是 提交 按鈕的事件。那真正的請求邏輯是submitFile，此時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)格保證，只是在文件選擇時候根據(jù)文件后綴名進(jì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，將不會上傳，并丟棄此文件。
3. 只能上傳一個文件，并且再次選擇時候覆蓋第一個文件。
limit="1" 可以限制只能上傳一個文件，當(dāng)再次選擇文件時，將會觸發(fā) on-exceed 回調(diào)方法(如果你綁定了此方法)，然后就結(jié)束后續(xù)操作了。不能滿足需求。
實現(xiàn)方案1：
在on-exceed方法里提示用戶，讓用戶先刪除原來的文件列表，然后就可以再次上傳新文件了。
onExceed(file, fileList) {
this.$message.error('只能上傳一個文件，請先刪除已有文件!')
},
第一個file參數(shù)，是當(dāng)前選中的文件，第二個參數(shù)fileList為已經(jīng)選中的文件列表。
實現(xiàn)方案二：
在用戶選擇時，默認(rèn)刪除第一個文件，這樣無論上傳多少個文件，都只會保留最后一次選擇的文件。關(guān)鍵點：綁定handle-change 事件，將fileList中的第一個文件刪除。代碼如下：
handleChange(file, fileList) {
if (fileList.length > 1) {
this.$refs.upload.handleRemove(fileList[0])
}
console.log(fileList)
},
當(dāng)采用這種方案時，頁面上會有出現(xiàn)文件刪除和增加的動畫效果，個人覺得不是很好，因此，需要除去此效果，網(wǎng)上找尋一波，以下方法經(jīng)受住了我的考驗，和大家分享下：
/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組件上傳時的使用方法和心得，建議一定要好好閱讀官方文檔的實例，基本都能滿足我們的需求。寫的不詳細(xì)的地方，一定要去看官網(wǎng)哦，文檔都寫了，睜大眼睛，傳送帶：?https://element.eleme.cn/#/zh-CN/component/upload
總結(jié)
以上是生活随笔為你收集整理的element vue 上传模板_vue+element 文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： axure如何导出原件_axure导出_
- 下一篇： html5倒计时秒杀怎么做,vue 设