51dev.com IT技术开发者社区

51dev.com 技术开发者社区

element el-upload 部分参数详解

互联网报道阅读(557)2020-03-03 收藏0次评论

element 框架很实用,最近不想去修改input上传的样式,干脆直接使用el-upload,使用的是手动上传,但是感觉文档中部分参数描述信息不是很详细,现在以我的调试的内容对部分参数使用做下详解。

一、action 上传地址   类型:string 

需要写动态地址时,修改成:action="url"    

data() {
      return {
          url:'http://123.com
      }
    },

类推,其他需要写动态参数时:即可

二、headers 类型:object(对象,需注意)  设置上传的请求头部 一般会放token值,基本也不可能为静态,认证信息这样写。

<el-upload class="upload-demo" ref="upload" :headers=“headers”>

</el-upload>

data() {
      return {
          headers:{Authorization:token}
      }
    },

三、data  类型:object(对象,需注意) 上传时携带的其他参数,上传时我没有使用到,暂时不做补充

四、name 类型:string  默认为file ,当然我们也可以修改成自己需要的

<el-upload class="upload-demo" ref="upload" name="fileame">

</el-upload>

PS:这里有个问题,我把方式改为自定义上传后即http-request后,name修改就没效果了,在http-request里修改fileName也不行,希望小伙伴们发现在哪修改可以告诉我

五、accept  类型:string 接收文件类型,多个以逗号隔开,注意是.txt,而不是txt

<el-upload class="upload-demo" ref="upload" accept=".txt,.csv">

</el-upload>

六、http-request 自定义上传事件,覆盖原来事件

可以这样使用

<el-upload class="upload-demo" ref="upload" :http-request="uploadFun" action="http://123.com"  name='‘fileName’>

</el-upload>

 uploadFun(param){
         var that = this;
         var data = new FormData(); //创建form对象
         data.append('file',param.file);
         //data.append('fileName',param.name);//我想要修改name属性,发现改成自定义上传后,html上的name不起作用了,想要在这         设置不起作用(name,fileName都试过,不起作用),导致接口调不通,最终放弃
         var config = {
           headers:{'Content-Type':'multipart/form-data'}
         };  //添加请求头
         this.axios.post(param.action,data,config)//
         .then(response=>{
           if(response.code==1){
           that.$message({ message: '上传成功!', type: 'success' });
           }
         })
         .catch(({err}) => {
           
         })  
   }

七、on-success 上传成功函数

最初调用不走,不得不用自定义上传,结果遇到问题,后又试一遍是可以的,可能一开始的写法有问题,

现在这样

<el-upload class="upload-demo" ref="upload" :http-request="uploadFun" action="http://123.com"  name='‘fileName’ :on-success="successFun">

 successFun(response,file,fileList){
        //这里三个入参,response为上传成功的回调值
       if(response.code==1){

          this.$message({ message: '上传成功!', type: 'success' });

       }

   }

以上就是element el-upload 部分参数详解的全部内容。