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

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

<el-uploadref='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-buttonsize="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-uploadref='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-buttonsize="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'}

然后你就会看到

完事！