自学内容网 自学内容网

VUE表单中多个el-upload上传组件共享回调函数解决方案

产品需求界面:

在产品配置页面表单中需要上传多个图片,项目中上传组件采用Element Plus 中的 el-upload,目前问题是每个上传组件都需要实现自己的回调,比如:on-change,采用官方推荐标准代码如下:

  <el-form-item label="站点图标">
                    <el-upload action="#" list-type="picture-card" accept="image/*" :auto-upload="true"
                        :show-file-list="false" :on-change="handleChange" :before-upload="handleBeforeUpload">
                        <el-image v-if="form.logourl" :src="form.logourl" fit="contain" class="avatar" />
                        <el-icon v-else>
                            <Plus />
                        </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-type="picture-card" accept="image/*" :auto-upload="true"
                        :show-file-list="false" :on-change="function (uploadFile, uploadFiles) {
                            return handleChange(uploadFile, uploadFiles, 'logo')
                        }" :before-upload="handleBeforeUpload">
                        <el-image v-if="form.logourl" :src="form.logourl" fit="contain" class="avatar" />
                        <el-icon v-else>
                            <Plus />
                        </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-change="function (uploadFile, uploadFiles) {
                            return handleChange(uploadFile, uploadFiles, 'logo')
                        }"

这段代码是将一个匿名函数作为 :on-change 属性的值,该函数接收两个参数:uploadFileuploadFiles。在函数体内,它调用了名为 handleChange() 的方法,并传递了三个参数:uploadFileuploadFiles'logo'

具体而言,这段代码的作用是在上传组件的 :on-change 事件中触发 handleChange() 方法,并将当前上传的文件对象 uploadFile、已上传文件数组 uploadFiles 和字符串 'logo' 作为参数传递给 handleChange() 方法,这样的设计可以在处理多个上传组件时,根据不同的文件类型进行不同的操作或逻辑处理。

效果如下:


原文地址:https://blog.csdn.net/mapboo/article/details/135667532

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!