Element-ui 上傳el-upload組件的使用方法


最近使用element-ui做了一次上傳,element-ui上傳是單個文件上傳,每上傳一個文件就請求一次ajax

代碼如下

  <el-upload
        accept="doc"     //允許上傳的文件類型
        ref="upload"
        class="upload-demo"
        :show-file-list="true"    //是否顯示上傳的文件列表
        multiple               //支持多選
        name="files"             //上傳文件的鍵名
        :before-upload="beforeUpload"     //上傳前的方法
        :on-progress="onProgress"       //上傳進度
        :data="{token:token}"          //上傳參數
        :on-error="error"
        :before-remove="beforeRemove"   //刪除文件前
        :file-list="fileList"        //文件列表
        :on-success="uploadSuccess"   //上傳成功
        action=""               //上傳地址
> <p >點擊此處添加你要上傳的文檔</p> <p>按住Ctrl可以選擇多篇上傳</p> </el-upload>

對應的方法如下:

         //上傳前(每個文件上傳前必須要做某種操作時)
            beforeUpload(file){
                return new Promise((resolve,reject)=>{
                    getToken().then(res=>{
                        this.token=res.data.data.access_token;
                        return resolve(true)
                    }).catch(()=>{
                        return reject(false);
                    })
                });
            },
            //上傳成功
            uploadSuccess(response,file,fileList){
                if(response.code==200){
                 //狀態碼為200時則上傳成功
                  
                }else{
                  //狀態碼不是200時上傳失敗 從列表中刪除
                    fileList.splice(fileList.indexOf(file),1);  
                }
            },       
             //禁止刪除
           beforeRemove(){
              return false; 
            },
          error(response, file, fileList){
              //上傳失敗
            },                                 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM