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){
              //上传失败
            },                                 
原文地址:https://www.cnblogs.com/xibaomeng/p/14149710.html