封装element点击按钮上传功能

效果如下，点击保存上传文件

//子组件
<template>
  <!--  -->
  <el-form-item :label="label">
    <el-upload
      class="upload-demo"
      drag
      ref="upload"
      :accept="accept"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :action="url"
      :limit="num"
      :data="transmit"
      :headers="token"
      :file-list="fileList"
      :auto-upload="false"
      multiple
    >
      <i class="el-icon-upload"></i>

      <div class="el-upload__text">
        将{{ label }}拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
  </el-form-item>
</template>
<script>
import Cookies from 'js-cookie'
import { baseurl } from "@/api/common/request";
export default {
  props: {
  //父组件传递的参数
    transmit: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      token: {token:Cookies.get("token")},//上传携带的token
      url: baseurl + "attachment/attachment/upload",//上传的url
      num: 3,//最大上传数量
      fileList: [],
      label: this.transmit.label,
      accept: this.transmit.accept,//上传携带的参数，从父组件获取
    };
  },
  mounted() {

  },
  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning("最多上传" + this.num + "个文件");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //父组件调用子组件的upload方法即可上传
    uploads() {
      this.$refs.upload.submit();
    },
  },
  watch: {
    transmit: (n, o) => {
      this.transmit = n;
    },
  },
};
</script>

     //父组件
      <el-tab-pane label="多媒体" name="third">
        <el-form
          :label-position="labelPosition"
          :model="formData"
          class="formSass"
        >
          <el-row :gutter="20">
            <el-col :span="12">
            //调用上传视频
              <upload :transmit="videoTransmit" ref="videoUpload"></upload>
            </el-col>
            <el-col :span="12">
             //调用上传图片
              <upload :transmit="imgTransmit" ref="imgUpload"></upload>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
	//引入
	import upload from "@/components/common/upload";
	//注册组件
	components: { upload },	
	
//传递的参数
  imgTransmit: {
        label: "图片",
        accept: ".png,.jpg,.jpeg,.icon,.ico,.tsp",
        attachmentBusinessType: 2,
        businessId: null,
        businessType: 1,
      },
      videoTransmit: {
        label: "视频",
        accept: ".mp4,.AVI,.mov,.FLV",
        attachmentBusinessType: 1,
        businessId: null,
        businessType: 1,
      },

		//点击按钮触发方法
 		this.$refs.videoUpload.uploads();
        this.$refs.imgUpload.uploads();