您的位置:首页 > 前端开发 > 技术笔记

element-ui 同页面多次循环引用上传组件,添加自定义回调参数

2018-02-01 13:54:03

问题

element-ui 的上传组件,用法如下

<el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
    export default {
        data() {
        return {
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            };
        },
        methods: {
            //删除上传列表内的图片时触发的回调
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //图片上传成功时触发的回调
            handleSuccess(response, file, fileList) {
                console.log(file);
            }
        }
    }
</script>

回调函数是无法传额外参数过来的,如果写成如下方式

:on-success="handleSuccess(itemId)"

那么回调函数就只能接受到itemId这个参数了,默认参数就接收不到了。
那么,如果有一个列表,每一项都需要有一个上传文件的功能,即会循环生成上传组件,每个组件的回调都调用的是同一个函数,回调回来的‘fileList’和数据源并不是同一个对象,所以,当图片发生变化时,就无法分出该把新数据放在哪个数据源里。



解决

将upload组件再次封装一次成新组件,MyUpload.vue,代码

<template>
    <el-upload
        class="upload-demo"
        :action="url"
        :multiple="false"
        :on-success="imgSuccess"
        :on-remove="imgRemove"
        :auto-upload="true"
        :accept="accept"
        :file-list="fileList">
        <el-button  size="small">选取文件</el-button>
    </el-upload> 
</template>
<script>
export default {
    name: 'myupload',
    props:{
        url:null,
        uploadId:null, //接收到的自定义的参数
        onSuccess:Function,
        onRemove:Function,
        fileList:null,
        accept:{
            type:String,
            default:'.jpg,.png,.jpeg,.jpeg2000,gif'
        }
    },
    methods:{
        imgRemove(){
                //es5写法
            //var arg = [].slice.call(arguments);
            //arg.push(this.uploadId); //返回参数添加自定义的参数
            //this.onRemove.apply(this,arg);
            
            //es6
            this.onRemove(...arguments,this.uploadId);
        },
        imgSuccess(){
            //var arg = [].slice.call(arguments);
            //arg.push(this.uploadId);
            //this.onSuccess.apply(this,arg);
            
            this.onSuccess(...arguments,this.uploadId);
        }
    }
}
</script>

调用

<div v-for="(item,idx) in list">
    <my-upload
        url="http://file.lejiaolexue.com/oss/oss"
        :uploadId="idx" //自定义的参数
        :onSuccess="upSuccess"
        :onRemove="handleRemove"
        :fileList="fileList"
    />
</div>


more 最近