真的是比较懒于写博文,下面来说一下el-upload组件在使用中遇到的一些坑:
原el-upload组件使用 :http_request 来绑定自定义上传函数,如何不通过按钮而是在完成一些操作以后自动触发上传事件呢?
答: 使用 :on-change 绑定一个方法,该方法携带参数(file, fileList), 在文件状态改变时调用,即在选中文件后,上传文件成功,上传文件失败时都会调用,在这个方法内完成文件上传前的操作之后,使用this.$refs.upload.submit() 完成上传组件自定义上传方法的调用;当然,前提是在使用<el-upload>组件时在其中定义了 ref= upload 的属性。<el-upload>组件自带的上传操作,action定义默认上传的接口,同时可以通过 :data=XXX 进行默认上传携带额外参数的定义,但是不能通过 this.refs.upload.data 操作在文件上传之前进行data属性的设置。
解释: 正确来说,是可以修改成功的。控制台打印 this.$refs.upload.data 的确是可以打印出设置的正确值,但是控制台查看触发的默认上传操作,却无法正确设置每一次上传的携带的额外参数值。(具体原因不详,但是感觉是异步操作的原因。data属性在有定义的初始值,在 on-change 绑定的方法中重新设置的额外参数,但没有立即生效,而是等到下一个文件上传才生效)
具体代码:
<el-upload
ref="upload"
:action="fileAction"
:headers="myHeaders"
:data="type"
drag
:auto-upload="false"
accept=".apk, .zip, .rar"
:file-list="fileList"
:http-request="uploadFile"
:on-error="uploaderr"
:on-success="succe"
:on-change="handleExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">上传应用新版本即可自动获取下载链接(只限于apk, rar, zip文件)</div>
</el-upload>
数据:
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....
所以我最终选择了自定义上传方法。