自定义上传组件,减少代码量与维护量

1、自定义上传组件

  <myupload :uploadDisplay="uploadDisplay" :onSubmit="onSubmit" :enabled="false" :uuid="form.uuid" :files="fileList"  @fileRemove="handleRemove" @fileChange="fileChange" @submitFinish="submitFinish"></myupload>
  
import myupload from '@/components/Upload/myupload'
export default {
    name: 'DataLxsXwxmfl',
    components: {  ... ,myupload },
     data() {
        return {
          onSubmit: false ,
           fileList: [],
           ...
           }
          },
methods: {
  //上传文件状态修改
  submitFinish(){
    this.onSubmit = false
  },
  //文件改变
  fileChange(fileList){
    this.fileList = fileList
  },
  // 删除文件
  handleRemove(obj) {
    if (obj.hasOwnProperty('uuid')) {
      fileRemove(obj.uuid, obj.id)
    }
  },
  //表单提交
  submit() {
      let validate = false
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }else{
          validate = true
        }
      })
      if(!validate)
        return
      // 配置获取
      this.form.fileNum = this.fileList.length
	    const existFile = this.fileList.length > 0 ? this.fileList.find(f => f.hasOwnProperty('raw'))!=null : false
        if (!existFile) {
          this.crud.submitCU()
        } else {
          this.onSubmit = true
        }
    },
    ...