el-upload組件一些坑

真的是比較懶于寫博文,下面來說一下el-upload組件在使用中遇到的一些坑:

  1. 原el-upload組件使用 :http_request 來綁定自定義上傳函數(shù),如何不通過按鈕而是在完成一些操作以后自動(dòng)觸發(fā)上傳事件呢?
    答: 使用 :on-change 綁定一個(gè)方法,該方法攜帶參數(shù)(file, fileList), 在文件狀態(tài)改變時(shí)調(diào)用,即在選中文件后,上傳文件成功,上傳文件失敗時(shí)都會(huì)調(diào)用,在這個(gè)方法內(nèi)完成文件上傳前的操作之后,使用this.$refs.upload.submit() 完成上傳組件自定義上傳方法的調(diào)用;當(dāng)然,前提是在使用<el-upload>組件時(shí)在其中定義了 ref= upload 的屬性。

  2. <el-upload>組件自帶的上傳操作,action定義默認(rèn)上傳的接口,同時(shí)可以通過 :data=XXX 進(jìn)行默認(rèn)上傳攜帶額外參數(shù)的定義,但是不能通過 this.refs.upload.data 操作在文件上傳之前進(jìn)行data屬性的設(shè)置。
    解釋: 正確來說,是可以修改成功的??刂婆_(tái)打印 this.$refs.upload.data 的確是可以打印出設(shè)置的正確值,但是控制臺(tái)查看觸發(fā)的默認(rèn)上傳操作,卻無法正確設(shè)置每一次上傳的攜帶的額外參數(shù)值。(具體原因不詳,但是感覺是異步操作的原因。data屬性在有定義的初始值,在 on-change 綁定的方法中重新設(shè)置的額外參數(shù),但沒有立即生效,而是等到下一個(gè)文件上傳才生效)

具體代碼:

<el-upload
                    ref="upload"
                    :action="fileAction"
                    :headers="myHeaders"
                    :data="type"
                    drag
                    :auto-upload="false"
                    accept=".apk, .zip, .rar"
                    :file-list="fileList"
                    :http-request="uploadFile"
                    :on-error="uploaderr"
                    :on-success="succe"
                    :on-change="handleExceed">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div>
                <div class="el-upload__tip" slot="tip">上傳應(yīng)用新版本即可自動(dòng)獲取下載鏈接(只限于apk, rar, zip文件)</div>
            </el-upload>

數(shù)據(jù):
            type: {type: 'apk'}
   //選擇文件時(shí)會(huì)替換掉上一個(gè)文件 狀態(tài)改變的鉤子
            handleExceed(files, fileList) {
                if(files.name.indexOf(".zip")>0){
                    //this.type =  "zip"
                    this.$refs.upload.data= {types: "zip"}
                    console.log("上傳組件自定義參數(shù)",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }
                else if(files.name.indexOf(".rar")>0){
                    //this.type = "rar"
                    this.$refs.upload.data = {types: "rar"}
                    console.log("上傳組件自定義參數(shù)",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }else if(files.name.indexOf(".apk")>0){
                    //this.type = "apk"
                    this.$refs.upload.data = {types:"apk"}
                    console.log("上傳組件自定義參數(shù)",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }
                this.fileList = fileList.slice(-1);
            },

當(dāng)我選擇的文件后綴是.zip時(shí),控制臺(tái)查看到的請(qǐng)求攜帶的參數(shù)還是 apk(初始設(shè)定值),當(dāng)我繼續(xù)選擇一個(gè)rar文件時(shí),控制臺(tái)查看的攜帶參數(shù)是zip,而不是rar....

所以我最終選擇了自定義上傳方法。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容