• 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){
                  //上传失败
                },                                 
  • 相关阅读:
    如何使用 ADO 将数据从 ADO 数据源传输到 Excel
    C#2.0中的可空类型Nullable
    2007年你必须学习的10项.NET技术
    日期正则表达式
    只允许n个实例进行
    MFC程序隐藏任务栏图标的三种方法
    Qt4小技巧——将button布局在QToolbar的右边
    QT学习随笔20120813
    只允许一个实例,允许n个实例
    折腾的DVCS
  • 原文地址:https://www.cnblogs.com/xibaomeng/p/14149710.html
Copyright © 2020-2023  润新知