Element-UI 自定義upload組件(進度條,刪除,下載)

先看看效果圖

代碼也很簡單,樣式本身寫好以後就剩下處理進度條了

<div class="footer">
                    <div class="title">
                        <span>產品資料</span>
                        <span>（提示：文件請控制大小在10MB之內）</span>
                        <el-upload 
                            multiple//多文件上傳
                            :action="uploadUrl" //文件上傳的地址(必填)
                            :show-file-list="false" //自定義樣式因此設置false不顯示
                            :file-list="fileArr"//文件列表
                            :before-upload="beforeUploadFile" //文件上傳前
                            :on-progress="uploadFileProcess" //文件傳輸過程(處理進度條)
                            :on-success="handleFileSuccess" //文件成功
                            >
                            <el-button size="small" type="primary">瀏覽</el-button>
                        </el-upload>   
                    </div>
                    <div class="file">
                        <div  v-for="(item,index) in fileArr" :key="index">
                            <span><i class="bg"></i>{{item.name}}</span>
                            <div  v-if="item.progressFlag">
                                <el-progress :percentage="item.progressPercent"></el-progress>
                            </div>
                            <span v-else-if="item.successFlag">上傳成功!</span>
                            <span v-else>上傳失敗!</span>
                            <span>{{item.size | fileSize}}</span>
                            <div v-if="item.progressFlag">
                                <span>[刪除]</span>
                                <span>[下載]</span>
                            </div>
                            <div v-else>
                                <span @click="removeFile(item,index)">[刪除]</span>
                                <span @click="downLoadFile(item,index)">[下載]</span>
                            </div>
                        </div>
                    </div>
                </div>
複製代碼

methods部分

<---文件上傳部分-->
     //上傳前的函數(用於驗證上傳文件格式及大小)
        beforeUploadFile(file){
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
              return false;
            }
        },
    //文件上傳過程當中的函數(在這裏獲取進度條的進度)
        uploadFileProcess(event, file, fileList){
            this.fileArr = fileList
            this.fileArr.forEach(item=>{
                if (item.percentage == 100) {

                } else {
                  item.progressFlag = true
                  item.progressPercent = Math.abs(item.percentage.toFixed(0));
                }
            })
        },
    //文件上傳成功的函數(用於文件上傳成功以後的邏輯)
        handleFileSuccess(res, file,fileList){
            this.fileArr = fileList
            this.fileArr.forEach((item,index)=>{
                item.progressFlag = false
                if(item.status == 'success'){
                    item.successFlag = true
                }else{
                    item.successFlag = false
                }
            })
        },
        //刪除文件(基於文件列表的數據進行操做)
        removeFile(item,index){
            this.fileArr.splice(index,1)
        },
        //下載文件(基於文件列表的數據進行操做)
        downLoadFile(item,index){
            
        }
複製代碼