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