网站调用优酷视频去广告,工程项目管理软件免费版,免费购物系统,目前比较火的外贸产品产品需求界面#xff1a; 在产品配置页面表单中需要上传多个图片#xff0c;项目中上传组件采用Element Plus 中的 el-upload#xff0c;目前问题是每个上传组件都需要实现自己的回调#xff0c;比如:on-change#xff0c;采用官方推荐标准代码如下#xff1a; el-fo…产品需求界面 在产品配置页面表单中需要上传多个图片项目中上传组件采用Element Plus 中的 el-upload目前问题是每个上传组件都需要实现自己的回调比如:on-change采用官方推荐标准代码如下 el-form-item label站点图标el-upload action# list-typepicture-card acceptimage/* :auto-uploadtrue:show-file-listfalse :on-changehandleChange :before-uploadhandleBeforeUploadel-image v-ifform.logourl :srcform.logourl fitcontain classavatar /el-icon v-elsePlus //el-icon/el-upload/el-form-item
const handleChange (uploadFiles, uploadFiles) {console.log(handle Change, uploadFile.url, uploadFiles);form.logourl uploadFile.url;
};由于此项目中同一个el-form中用了三个上传组件如果每一个都写回调需要写多个不同的回调拿到这个图片url显示出来比较麻烦现在需要的效果是三个上传组件的change事件回调采用一个回调函数具体实现如下直接代码展示 el-form-item label站点图标el-upload action# list-typepicture-card acceptimage/* :auto-uploadtrue:show-file-listfalse :on-changefunction (uploadFile, uploadFiles) {return handleChange(uploadFile, uploadFiles, logo)} :before-uploadhandleBeforeUploadel-image v-ifform.logourl :srcform.logourl fitcontain classavatar /el-icon v-elsePlus //el-icon/el-upload/el-form-item
const handleChange (uploadFile, uploadFiles, uploadType) {console.log(handle Change, uploadFile.url, uploadFiles, uploadType);switch (uploadType) {case logo: {form.logourl uploadFile.url;}break;case wx: {form.wxurl uploadFile.url;}break;case gzh: {form.gzhurl uploadFile.url;}break;}};核心代码解释
:on-changefunction (uploadFile, uploadFiles) {return handleChange(uploadFile, uploadFiles, logo)}
这段代码是将一个匿名函数作为 :on-change 属性的值该函数接收两个参数uploadFile 和 uploadFiles。在函数体内它调用了名为 handleChange() 的方法并传递了三个参数uploadFile、uploadFiles 和 logo。
具体而言这段代码的作用是在上传组件的 :on-change 事件中触发 handleChange() 方法并将当前上传的文件对象 uploadFile、已上传文件数组 uploadFiles 和字符串 logo 作为参数传递给 handleChange() 方法这样的设计可以在处理多个上传组件时根据不同的文件类型进行不同的操作或逻辑处理。
效果如下
