解决ElementUI中Upload组件单个文件替换及未选择文件不能触发submit方法

问题

1、仅上传单个文件时，文件选择无法实现替换功能
2、自定义上传文件时，如果el-upload不上传文件，触发不了http-request问题

代码及解决方案

问题一解决方案：

不限制limit，on-change钩子函数中验证当列表大于等于1个的时候替换文件

	uploadChange(file, fileList) {
      // 验证文件数量，替换后仅保留第一个文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },

问题二解决方案：

通过on-change钩子函数获取选择文件，再使用this.$refs.upload.submit()或直接使用FormData上传。
文件已经在钩子函数处理，上传方式感觉没有明显区别，任选其一即可

代码片段：( 直接使用FormData )

	<el-upload ref="upload" drag action="#" :auto-upload="false"
               :multiple="false" :on-change="uploadChange" :on-remove="uploadRemove">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        <span>点击或将文件拖拽到这里上传</span>
        <div style="margin-top: 10px; color:#aaa">支持扩展名：.zip</div>
      </div>
    </el-upload>
    <div>
      <el-button size="small"> 取 消</el-button>
      // 直接使用FormData
      <el-button type="primary" size="small" @click="handleUploadFile" :loading="uploadLoading"> 确 定</el-button>
    </div>

	// on-change钩子，保存file文件+替换文件
	uploadChange(file, fileList) {
      this.file = file.raw
      // 问题一方案：验证文件数量，替换后仅保留第一个文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // on-remove钩子，清空文件
    uploadRemove() {
      this.file = null
    },
    //  放弃submit()方法直接使用FormData上传()
    handleUploadFile() {
      if (!this.file) {
        return errorMsg('请选择上传文件！')
      }
      if (!this.description) {
        return errorMsg('描述不能为空！')
      }
      const reg = /^[0-9a-zA-Z-_.]{1,}$/
      if (!reg.test(this.file.name)) {
        return errorMsg('服务名称不能包含特殊符号!')
      }
      this.uploadLoading = true
      // new FormData()
      const formData = new FormData()
      formData.append('description', this.description)
      formData.append('file', this.file)
      //  调用上传接口...
      service.upload(this.appType, formData).then(res => {
        successMsg(res.data)
        this.uploadLoading = false
      }).catch(() => {
        this.uploadLoading = false
      })
    },
    // 利用

代码片段：( 覆盖默认上传行为，配合http-request使用 )

<el-upload ref="upload" class="upload-demo" drag action="customize" :auto-upload="false"
               :multiple="false" :on-change="uploadChange" :on-remove="uploadRemove" :http-request="uploadFile">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        <span>点击或将文件拖拽到这里上传</span>
        <div style="margin-top: 10px; color:#aaa">支持扩展名：.zip</div>
      </div>
    </el-upload>
    <div slot="footer" style="text-align:right">
      <el-button size="small"> 取 消</el-button>
      <el-button type="primary" size="small" @click="handleUploadFile" :loading="uploadLoading"> 确 定</el-button>
    </div>

	uploadChange(file, fileList) {
      this.file = file.raw
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    uploadRemove() {
      this.file = null
    },
	handleUploadFile1() {
      if (!this.file) {
        return errorMsg('请选择上传文件！')
      }
      if (!this.description) {
        return errorMsg('描述不能为空！')
      }
      const reg = /^[0-9a-zA-Z-_.]{1,}$/
      if (!reg.test(file.name)) {
        return errorMsg('服务名称不能包含特殊符号!')
      }
      this.$refs.upload.submit()
    },
    //  覆盖默认上传行为
    uploadFile(params) {
      const file = params.file
      this.uploadLoading = true
      const formData = new FormData()
      formData.append('description', this.description)
      formData.append('file', file)
      service.upload(this.appType, formData).then(res => {
        successMsg(res.data)
        this.uploadLoading = false
      }).catch(() => {
        this.uploadLoading = false
      })
    }

参考帖子：

1、element el-upload 上传一个文件时候替换
2、使用el-upload不上传文件，触发不了http-request问题