vue项目中用el-upload实现文件上传

el-upload 首先要将action=""，这样是代表手动上传

<el-upload class="upload" action="" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed"
    :file-list="fileList" :http-request="upLoadFile" multiple>
    <el-button class="upload-icon" size="small" icon="el-icon-upload">点击上传</el-button>
    <el-button class="upload-icon" @click.stop="getUploadInfo" type="primary"
      icon="el-icon-s-promotion" size="small" :loading="loading">提交</el-button>
    <span>仅支持上传xls、xlsx文件</span>
 </el-upload>

upLoadFile方法中拿到文件的数据

接着在提交的时候，调用接口发送文件到后端

方法为getUploadInfo

import uploadFile from './api'
getUploadInfo(){
    const formData = new FormData();
    formData.append('file', this.fileList[0].file);
    const { code, data } = await uploadFile(formData);
    if(code === 0){
        console.log('上传成功')
    }
}

同时，如果封装了axios，header需要单独配置一下 在公共封装的方法里面配置

import axios from "axios"
let instance = axios.create({
  // 默认方法设置
  method: "get",
  responseType: "json",
  timeout: 50000,
  // 返回数据设置，有data和headers两个参数
  headers: {
    "Content-Type": "application/json",
  },
})
// 文件上传处理封装post,设置超时时间10秒

instance.upload = (url, data) => {
  return instance.post(url, data, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  })
}

如何使用

export function uploadFile(params) {
  return http.instance.upload('/upload', params)
}