Vue/Element ui/Formdata 实现文件上传

需求

需求不算复杂，上传一个文件，上传内容包括文件本身(File)和文件所属分类(String)。

FormData

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
FormData的主要用途有两个：
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2、异步上传文件

更为详细的FormData介绍，参见MDN中关于FormData的介绍

使用Element Ui上传组件

1、具体demo可见Element Ui上传组件，
前台代码如下：

<template>
  <div class="man-container">
    <div class="el-card">
      <div class="el-card__header">
        <slot name="header">
          <p>文件上传</p>
        </slot>
      </div>