在使用element ui的组件的时候,经常使用组件的自定义钩子,如el-upload中的on-success钩子,
该钩子在成功调用之后会默认返回三个参数,response,file 和fileList,在实际项目使用中,会存在同一个页面有多处需要进行文件上传,我们在上传的时候需要给每个文件都加一个识别的label,那么就需要在每次调用该钩子的时候,在自定义传一个label的参数,如果如下这种方式,
:on-success=" handdleSuccess(label)"
那么其实label就占用了response的位置而已,label代表的是response的内容,怎样才能传自定义参数而不占用其自带参数勒?具体方式如下所示:
<el-upload
class="upload-box"
:data="uploadOtherParam"
accept=".jpg,.jpeg,.png,.bmp"
:headers="headers"
:action="uploadAction"
:on-success="(response,file,fileList,label)=>{return handdleSuccess(response,file,fileList,labelList.IDCardFront)}"
list-type="picture-card"
:limit="1"
:show-file-list="true"
:class="{disabled: uploadDisabled7}"
:on-change="(file,fileList,label)=>{return changePictureUpload(file,fileList,labelList.IDCardFront)}"
:before-upload="beforeAvatarUpload"
:on-remove="(file,fileList,label)=>{return removeFile(file,fileList,labelList.IDCardFront)}"
:on-exceed="handleExceed"
>
data(){
return{
labelList:{IDCardFront:'001'}
}
},
methods:{
handdleSuccess(response,file,fileList,label){
console.log('file',file)
console.log('fileList',fileList)
console.log(label)
}
其实方法还有其他,掌握一种能用就行。特此记录