element中el-upload手动上传文件+contentType是multipart/form-data+接口封装

效果图，点击上传按钮选中文件，点击确认后调后端接口

// actiond地址是必填，http-request是自定义调接口覆盖默认的上传行为，accept为接收文件得类型
<template>
 <div>
 	<el-upload
        ref="upfile"
        style="display: inline;margin:0 10px 0 10px"
        action="#"
        :http-request="submitUpload"
        :show-file-list="false"
        :limit="1"
        accept=".xlsx"
      >
        <el-button size="small" type="primary"></el-button>
    </el-upload>
 </div>
<template/>

<script>
methods: {
submitUpload (item) {
// 这里得IMPORT_DATA是我封装后得接口，自己根据实际调
      IMPORT_DATA({ type: 1, file: item.file }).then((res) => {
      // 逻辑
      }).catch((err) => {
        console.log(err)
      })
    },
}
</script>

接着是我封装axios得上传接口，其中isLogin, removeTokenLocalStorage, getTokenLocalStorage得方法我就不贴出来了。有需要自己写一下就好了，逻辑并不复杂。

import axios from 'axios'
import {
  MessageBox,
  Message
} from 'element-ui'
import { isLogin, removeTokenLocalStorage, getTokenLocalStorage } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 45000 // request timeout: 30 seconds
})

service.defaults.withCredentials = true

const defaultRequestInterceptor = (config) => {
  // 请求头设置
  config.headers["Access-Control-Allow-Origin"] = true
  // 如果已经登录的状态,请求加上token
  if (isLogin()) {
    config.headers["token"] = getTokenLocalStorage()
    config.headers["content-type"] = 'multipart/form-data; boundary=----WebKitFormBoundary7TMYhSONfkAM2z3a'
  }
  return config
}

// request interceptor
service.interceptors.request.use(
  // 导入请求头以及相关配置
  defaultRequestInterceptor,
  (err) => Promise.reject(err)
)

// response interceptor
service.interceptors.response.use(
  (response) => {
    const { code } = response.data.rspInfo
    // debugger
    // 未登录或登录超时跳转登录
    if (typeof code === "string" && code !== "000000") {
      return catchAxiosError(response)
    }
    return response.data
  },
  // 导入请求错误处理
  catchAxiosError
)

/* 定义错误拦截响应 */
function catchAxiosError (resOrAxiosError) {
  const resData = dataHandle(resOrAxiosError)
  const response = resOrAxiosError ?
    resOrAxiosError.data.rspInfo :
    resOrAxiosError
  const config = resOrAxiosError.config

  if (!response) {
    if (config.showErrorMessage !== false)
      // Message.error(genCommonMessageOptions("Network failure"))
      Promise.reject('Network failure')
  } else {
    const {
      code,
      msg
    } = response
    // 无效登录状态跳转登录
    if (code === "201004") {
      // 清除本地token
      removeTokenLocalStorage()
      // 根据具体项目修改登录页面的URL
      location.href = "#/login"
    } else {
      Promise.reject(msg)
    }
  }

  return Promise.reject(
    resOrAxiosError instanceof Error ? resOrAxiosError : resData
  )
}

/* 预处理函数 提前处理后端返回的数据结构*/
export function dataHandle (res) {
  const code = res.data.rspInfo.code ? res.data.rspInfo.code : null
  const msg = res.data && res.data.rspInfo && res.data.rspInfo.msg ? res.data.rspInfo.msg : null
  const resData = {
    data: res && res.data ? res.data.data : null,
    rspInfo: { code, msg }
  }
  return resData
}

export default service

/**************************************************
                uploadApiFunc
 **************************************************
 * 预处理接口调用
 * @param method 请求方法，暂只支持 get 和 post，需要别的再加
 * @param url 接口 URL
 * @returns 已封装了 method 和 url 的接口函数，可以直接调用请求 method 可选值 'get' || 'post'
 */
export function uploadApiFunc (method, url, isHandle = false) {
  // 导入reqBody的相关设置
  return function (payload, config = origin) {
    let request
    switch (method) {
      case "get":
        request = service.get(url, payload)
        break
      case "post":
        let formdata = new FormData()
        formdata.append('name', 'uploadExcel')
        formdata.append('files', payload.file)
        formdata.append('type', payload.type)
        formdata.append('lang', 'en_US')
        request = service.post(
          url,
          formdata
        )
        break
    }
    if (isHandle) {
      return request.then(res => {
        return dataHandle(res)
      }).catch((axiosError) =>
        axiosError
      )
    } else {
      return request.catch((axiosError) => axiosError)
    }
  }
}