element ui 上传组件实现手动上传

首先需要给上传组件增加http-request属性，这个方法中可以获取到文件，并按照自己的方式进行上传。

<el-upload
      ref='fileUpload'
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名：.xls</div>
</el-upload>

设置了http-request属性之后，在选取文件后马上就会调用该方法。如果不想要马上上传的话，只需要增加:auto-upload=‘false’，然后在需要上传时，调用实例的submit方法即可执行httpRequest方法

methods:{
	upload(){
		this.$refs.fileUpload.submit()
	}
}

如果是单纯的上传文件，但需要携带参数的话，只需要增加属性即可，例如：

<el-upload
      ref='fileUpload'
      :data="{productId:123}"
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名：.xls</div>
</el-upload>

但是如果是在表单中上传文件，且是直接和其他表单项数据一起上传的话，则需要手动进行上传。（不做表单校验则不需要手动进行数据传输，直接使用data属性包含额外参数即可）
如果需要做表单校验，则httpRequest只是为了获取到文件，首先不要设置auto-upload，选择文件后马上就调用httpRequest方法，在httpRequest方法中获取到文件并储存，方便后面做表单校验。

    httpRequest(params) {
      this.form.file = params.file
    },

在最终提交时，需要使用formData对象，包裹数据传输

      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            file: this.form.file,
            secret: this.form.key
          }
          let form = new FormData()
          for (let i in data) {
            form.append(i, data[i])
          }
          uploadFn(form).then((res) => {
           this.$message('上传成功')
          })
        }
      })

记得在请求时，增加请求头：

      headers: {
        'Content-Type': 'multipart/form-data'
      }

然后你就会看到

完事！