以上传excel文件为例（先看效果如图）

点击按钮，弹出框，选择所需上传的文件，将文件传给后端

代码实现——HTML部分

用elementUi的组件el-upload，其中action为必填参数，为上传文件的地址，若没有此地址设为空或#即可；auto-upload是否在选取文件后立即进行上传，默认为true；on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，方法写在这里；show-file-list是否显示已上传文件列表，默认为true

<el-upload
            ref="upload"
            class="upload-demo"
            action="#"  
            accept=".xlsx, .xls"
            :auto-upload="false"
            :on-change="uploadFile"
            :show-file-list="false"
          >
          <el-button type="warning">导入商品</el-button>
        </el-upload>

代码实现——JS部分

用FormData传文件，FormData提供一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

uploadFile (item) {
        let formData = new FormData()
        let file = item.raw
        formData.append('file', file)
        this.$http({
          url: ' ', //后端提供的接口
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({data}) => {
          this.$alert(data.data)
        })
    }

拿到文件数据item.raw，添加到FormData中去——调用append()

注意： headers请求头必要写上，HTTP content-type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，Content-Type 标头告诉客户端实际返回的内容的内容类型。 此例中用multipart/form-data
常见的媒体格式类型如下：

• text/html ： HTML格式
• text/plain ：纯文本格式
• text/xml ： XML格式
• image/gif ：gif图片格式
• image/jpeg ：jpg图片格式
• image/png：png图片格式

以application开头的媒体格式类型：

• application/xhtml+xml ：XHTML格式
• application/xml： XML数据格式
• application/atom+xml ：Atom XML聚合格式
• application/json： JSON数据格式
• application/pdf：pdf格式
• application/msword ： Word文档格式
• application/octet-stream ： 二进制流数据（如常见的文件下载）
• application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

• multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式