原生input实现文件上传

背景介绍

• 使用el-upload组件在上传文件时，只传一个file字段后直接调用上传接口。但是在项目开发中，上传接口还需要传入其他字段，比如id、file，因此el-upload组件不满足需求，使用原生input解决。
• 不使用el-input的原因是，它相较原生input的呈现效果，外层会多嵌套一个输入框，需要人工去掉，费时费力。对比效果如下
  -el-input效果
  
  原生input效果
  

实现方式

• template：参数使用和el-input中没有太大差别
  • type：file，指定输入框类型是文件
  • change事件：监听input数值变化
  • accept：指定可以上传的类型

<input type="file" @change="uploadFile" accept=".xlsx,.xls,.csv">

• script方法

const uploadFile = (e) => {
  let file = e.target.files[0]
 }

输出file格式如下：

• 调上传接口传入二进制文件：经过new FormData()后，文件就是二进制，直接传就不是，所以必须new FormData()

let data = new FormData()
  data.append('id', form.id)
  data.append('file', form.file)
  //调上传接口
  importQuestion(data).then(res => {
  	......
  })