element ui實現手動上傳檔案,且只能上傳單個檔案,並能覆蓋上傳
element ui提供了成熟的元件場景,但實際工作中難免會遇到認(sha)真(diao)的產品。比如,最近遇到的,要求實現手動上傳特定格式檔案(使用者點選“上傳檔案”按鈕,確定之後,只是單純選擇了檔案,點選頁面上的“提交”按鈕才上傳),並展示使用者選擇的檔名稱,且只能選擇一個檔案,如果使用者選擇第2,3,4...等檔案,要求後者覆蓋前者,即使用者看到的總是最新選擇的檔案。
OK,需求合理,但是,查了查API,呃。。。貌似不太好完美實現。
查原始碼,改樣式。完美奉上解決方案。
一,實際應用場景
實現手動上傳特定格式的檔案,展示所選檔名稱,且能實現覆蓋上傳
二,分析
1, 解決手動上傳問題
官網API(https://element.eleme.cn/#/zh-CN/component/upload),給出“手動上傳”,只需要在Upload元件新增 屬性:auto-upload="false" ,然後呼叫this.$refs.upload.submit(); 方法即可。
2,解決特定格式檔案問題
這塊,也有例子,對於本專案,要求新增txt格式或者csv格式, 所以,Upload元件新增 屬性accept=".txt,.csv"
3,最麻煩的是上傳限制問題
首先想到官網API裡的 limit屬性, Upload元件新增屬性:limit="1",但是這樣,無聊怎麼選擇檔案,頁面上展示的始終是第一次選擇的檔案,這效果和我想的大相徑庭。
“單身限制了你的想象力”
繼續翻,看到file-list屬性,儲存的是使用者選擇的檔案陣列。
想通過on-change方法,改變file-list裡選擇的檔案列表,只保留最後一項。邏輯上來說行得通。
程式碼如下:
模板程式碼(已精簡):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template>
<div>
<el-upload
class = "upload-demo"
ref= "upload" // 注意1
accept= ".csv" // 注意2
:file-list= "fileList" // 注意3
:on-change= "handleChange" // 注意4
:action= "uploadUrl"
:show-file-list= "true"
:on-success= "onSuccess"
:on-error= "onError"
:auto-upload= "false" // 注意5
>
<el-button type= "primary" slot= "trigger" >選取檔案</el-button>
</el-upload>
<el-button type= "primary" @click= "handleSubmit" >提交</el-button>
</div>
</template>
|
script程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script>
export default {
name: 'Upload' ,
data() {
fileList: [],
uploadUrl: '' ,
},
methods: {
onSuccess(res) {
this .$alert(res.data, '提示' , {
confirmButtonText: '確定' ,
callback: action => {
console.log( "上傳成功" )
},
})
},
onError(res) {
this .$alert( '建立失敗' , '提示' , {
confirmButtonText: '確定' ,
callback: action => {
console.log( "上傳失敗" )
},
})
},
handleChange(file, fileList) {
if (fileList.length > 0) {
this .fileList = [fileList[fileList.length - 1]] // 這一步,是 展示最後一次選擇的csv檔案
}
},
submit() {<br> this .uploadUrl = '/upload' // 這裡,讀者換成實際專案中的上傳介面
this .$nextTick(() => {
this .$refs.upload.submit()
})
},
},
}
</script>
|
到這裡,基本功能上實現了目標場景,但是有一個樣式問題,因為是認為改變file-list,取最後一項,因此,使用者選擇第二個檔案後,從第一個檔案到第二個檔案,有動態切換的效果,這不是我想要的,我想要的是 使用者點選“上傳檔案”,本地電腦 選擇檔案,點選“確定”,頁面上直接展示所選檔案,不要動態切換。
鼓搗很久(省略很多字),翻看element upload元件的css原始碼。
去掉這一部分動畫,完美解決。
css程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style lang= "scss" scoped>
.upload-demo {
display: flex;
}
/deep/ .el-list-enter-active,
/deep/ .el-list-leave-active {
transition: none;
}
/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
opacity: 0;
}
/deep/ .el-upload-list {
height: 40px;
}
</style>
|
至於css中的 /deep/ 是幹嘛的,其實是修改elementui等第三方元件內部樣式,做的滲透。如果不用scss, 可以使用 >>> 符號來修改第三方元件內部樣式。
三,總結
“什麼都不懂的時候,我曾擁有全部。”
本文思路,從 踩過的坑 到解決問題,耗時許久,如需轉載,請標明出處,感謝配合。
還是同樣的ps,每次用element ui 都會有一些感觸,
苦笑。