el-upload组件一些坑

真的是比较懒于写博文,下面来说一下el-upload组件在使用中遇到的一些坑:

  1. 原el-upload组件使用 :http_request 来绑定自定义上传函数,如何不通过按钮而是在完成一些操作以后自动触发上传事件呢?
    答: 使用 :on-change 绑定一个方法,该方法携带参数(file, fileList), 在文件状态改变时调用,即在选中文件后,上传文件成功,上传文件失败时都会调用,在这个方法内完成文件上传前的操作之后,使用this.$refs.upload.submit() 完成上传组件自定义上传方法的调用;当然,前提是在使用组件时在其中定义了 ref= upload 的属性。

  2. 组件自带的上传操作,action定义默认上传的接口,同时可以通过 :data=XXX 进行默认上传携带额外参数的定义,但是不能通过 this.refs.upload.data 操作在文件上传之前进行data属性的设置。
    解释: 正确来说,是可以修改成功的。控制台打印 this.$refs.upload.data 的确是可以打印出设置的正确值,但是控制台查看触发的默认上传操作,却无法正确设置每一次上传的携带的额外参数值。(具体原因不详,但是感觉是异步操作的原因。data属性在有定义的初始值,在 on-change 绑定的方法中重新设置的额外参数,但没有立即生效,而是等到下一个文件上传才生效)

具体代码:


                
                
将文件拖到此处,或点击上传
上传应用新版本即可自动获取下载链接(只限于apk, rar, zip文件)
数据: type: {type: 'apk'}
   //选择文件时会替换掉上一个文件 状态改变的钩子
            handleExceed(files, fileList) {
                if(files.name.indexOf(".zip")>0){
                    //this.type =  "zip"
                    this.$refs.upload.data= {types: "zip"}
                    console.log("上传组件自定义参数",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }
                else if(files.name.indexOf(".rar")>0){
                    //this.type = "rar"
                    this.$refs.upload.data = {types: "rar"}
                    console.log("上传组件自定义参数",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }else if(files.name.indexOf(".apk")>0){
                    //this.type = "apk"
                    this.$refs.upload.data = {types:"apk"}
                    console.log("上传组件自定义参数",this.$refs.upload.data)
                    //this.$refs.upload.submit();
                }
                this.fileList = fileList.slice(-1);
            },

当我选择的文件后缀是.zip时,控制台查看到的请求携带的参数还是 apk(初始设定值),当我继续选择一个rar文件时,控制台查看的携带参数是zip,而不是rar....

所以我最终选择了自定义上传方法。

你可能感兴趣的:(el-upload组件一些坑)