zoukankan      html  css  js  c++  java
  • 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){
                  //上传失败
                },                                 
  • 相关阅读:
    C# Serializable(转)
    ASP.NET 2.0中构造个性化网页 (转)
    ASP如何限定中英文混合的文字输出字数?
    关于clientHeight、offsetHeight、scrollHeight
    无法删除,打开的文件夹
    学习.Net的经典网站(转)
    SQL注入漏洞全接触进阶篇
    关于robots.txt
    SQL注入漏洞全接触入门篇
    关于zend解密的程序
  • 原文地址:https://www.cnblogs.com/xibaomeng/p/14149710.html
Copyright © 2011-2022 走看看