JS文件上传

HTML部分

  <div>
            <input
              type="file"
              class="file"
              multiple
              @change="fileChange"
            />
            <el-button plain>
              <span style="vertical-align: middle">上传</span>
            </el-button>
          </div>

JS部分采用表单上传

const fileChange = (event: any) => {
  const files = event.target.files
  if (files.length > 1) {
    ElMessage.warning('一次只能上传一个文件')
  } else {
    const formData = new FormData()
    formData.append('id', id)
    formData.append('file', files[0])
    Api.uploadFile(formData).then((res: any) => {
      if (res) {
        ElMessage.success('上传成功')
        seach()
        configurationVisible.value = false
      } else {
        ElMessage.success('上传失败')
      }
    })
  }
}

CSS部分

.file {
  width: 30px;
  font-size: 12px;
  position: absolute;
  width: 50px;
  height: 42px;
  // border: 1px solid red;
  opacity: 0;
}

PS：axios部分，请求类型采用post要在config中设置headers

 headers: {
          'Content-Type': 'multipart/form-data',
          'X-Requested-With': 'XMLHttpRequest'
        }