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){
                  //上传失败
                },                                 
  • 相关阅读:
    ecstore前台模板变量处理
    MySQL慢查询日志总结
    Linux 操作MySQL常用命令行
    CGI、FastCGI和php-fpm的概念和区别
    sync实现windows与nginx主机端文件同步(参考文档)
    PHP实现四种基本排序算法
    http和https协议
    linux的计划任务
    php封装一个接口类
    mysql的常见面试问题
  • 原文地址:https://www.cnblogs.com/xibaomeng/p/14149710.html
Copyright © 2011-2022 走看看