vue-cli3.0+element-ui上傳組件el-upload的使用
最近項(xiàng)目中涉及很多文件上傳的地方,然后文件上傳又有很多限制。比如文件大小限制,文件個(gè)數(shù)限制,文件類(lèi)型限制,文件上傳后的列表樣式自定義,包括上傳進(jìn)度條等問(wèn)題。下面是我對(duì)element-ui的上傳組件的一些改造, 點(diǎn)擊查看源碼。
我是自己維護(hù)了一個(gè)列表數(shù)據(jù),再對(duì)這個(gè)列表數(shù)據(jù)進(jìn)行一些操作,沒(méi)用組件自帶的。先看看我的組件模版
<template> <el-upload class="upload-demo" :limit="limit" :action="action" :accept="accept" :data="data" :multiple="multiple" :show-file-list="showFileList" :on-exceed="handleExceed" :with-credentials="withcredentials" :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError"> <el-button size="small" type="primary">上傳</el-button> </el-upload> </template>
limit: 限制文件個(gè)數(shù)
action:文件的上傳地址(這里我沒(méi)有特別封裝axios,直接用默認(rèn)的)
accept:接受上傳的文件類(lèi)型(字符串)
data:上傳時(shí)附帶的額外參數(shù)
multiple:多選(布爾類(lèi)型,我這里設(shè)為true,即可以批量上傳)
show-file-list:是否顯示文件上傳列表
with-credentials:是否攜帶cookie,布爾類(lèi)型,true表示攜帶
這是我設(shè)置的一些初始值
下面最重要的就是鉤子函數(shù)了
1、handleExceed是文件超出個(gè)數(shù)限制時(shí)的鉤子
private handleExceed(files: any, fileList: any) { if (fileList.length > 20) { this.$message.error('最多允許上傳20個(gè)文件'); return false; } }
2、handleBeforeUpload文件上傳前的鉤子,可以做一些攔截,return false,則停止上傳
private handleBeforeUpload(file: any) { // 文件大小限制 const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { this.$message.error('不得超過(guò)5M'); return isLt5M; } // 文件類(lèi)型限制 const name = file.name ? file.name : ''; const ext = name ? name.substr(name.lastIndexOf('.') + 1, name.length) : true; const isExt = this.accept.indexOf(ext) < 0; if (isExt) { this.$message.error('請(qǐng)上傳正確的格式類(lèi)型'); return !isExt; } // 大小和類(lèi)型驗(yàn)證都通過(guò)后,給自定義的列表中添加需要的數(shù)據(jù) this.objAddItem(this.tempArr, file); }
3、handleProgress文件上傳時(shí)的鉤子,更新進(jìn)度條的值
private handleProgress(event: any, file: any, fileList: any) { this.tempArr.forEach((element: any, index: number) => { if (element.uid === file.uid) { // 更新這個(gè)uid下的進(jìn)度 const progress = Math.floor(event.percent); // 防止上傳完接口還沒(méi)有返回成功值,所以此處給定progress的最大值為99,成功的鉤子中再置為100 element.progress = progress === 100 ? 99 : progress; this.$set(this.tempArr, index, element); this.$emit('changeFileList', this.tempArr); } }); }
4、handleSuccess文件上傳成功時(shí)的鉤子
private handleSuccess(response: any, file: any, fileList: any) { this.tempArr.forEach((element: any, index: number) => { if (element.uid === file.uid) { element.progress = 100; // element.url為下載地址,一般后端人員會(huì)給你返回 // 我這邊為了做后面的下載,先寫(xiě)死鏈接供測(cè)試 element.url = 'http://originoo-1.b0.upaiyun.com/freepic/3226433.jpg!freethumb'; this.$message.success('文件上傳成功'); this.$set(this.tempArr, index, element); this.$emit('changeFileList', this.tempArr); } }); // response是后端接口返回的數(shù)據(jù),可以根據(jù)接口返回的數(shù)據(jù)做一些操作 // 示例 // const bizCode = response.rspResult.bizCode; // switch (bizCode) { // case 200: // this.tempArr.forEach((element: any, index: number) => { // if (element.uid === file.uid) { // element.progress = 100; // element.url = response.data.url; // 這是后端人員給我返回的下載地址 // this.$message.success('文件上傳成功'); // this.$set(this.tempArr, index, element); // this.$emit('changeFileList', this.tempArr); // } // }); // break; // default: // this.tempArr.forEach((element: any, index: number) => { // if (element.uid === file.uid) { // this.tempArr.splice(index, 1); // 上傳失敗刪除該記錄 // this.$message.error('文件上傳失敗'); // this.$emit('changeFileList', this.tempArr); // } // }); // break; // } }
5、handleError文件上傳失敗時(shí)的鉤子
private handleError(err: any, file: any, fileList: any) { this.tempArr.forEach((element: any, index: number) => { if (element.uid === file.uid) { this.tempArr.splice(index, 1); // 上傳失敗刪除該記錄 this.$message.error('文件上傳失敗'); this.$emit('changeFileList', this.tempArr); } }); }
添加數(shù)據(jù)函數(shù)
private objAddItem(tempArr: any[], file: any) { const tempObj = { uid: file.uid, // uid用于辨別文件 originalName: file.name, // 列表顯示的文件名 progress: 0, // 進(jìn)度條 code: 200, // 上傳狀態(tài) }; tempArr.push(tempObj); this.$emit('changeFileList', tempArr); }
上傳的文件下載封裝
private downloadFileFun(url: any) { const iframe: any = document.createElement('iframe') as HTMLIFrameElement; iframe.style.display = 'none'; // 防止影響頁(yè)面 iframe.style.height = 0; // 防止影響頁(yè)面 iframe.src = url; document.body.appendChild(iframe); // 這一行必須,iframe掛在到dom樹(shù)上才會(huì)發(fā)請(qǐng)求 // 5分鐘之后刪除(onload方法對(duì)于下載鏈接不起作用,就先摳腳一下吧) setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解析使用useDark(),發(fā)現(xiàn)transition?動(dòng)畫(huà)失效
這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動(dòng)畫(huà)失效的示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題,文中還給大家提到了vue中axios解決跨域問(wèn)題和攔截器使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-03-03Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10Vue.js中關(guān)于偵聽(tīng)器(watch)的高級(jí)用法示例
Vue.js 提供了一個(gè)方法 watch,它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。下面這篇文章主要給大家介紹了關(guān)于Vue.js中關(guān)于偵聽(tīng)器(watch)的高級(jí)用法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問(wèn)題
今天小編就為大家分享一篇解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08