element ui 自定义文件上传二进字流传值问题

1.封装的post请求

复制代码

import axios from './axios.js' //引入axios文件
export function post (url, data) {
  return axios({
    method: 'post',
    url,
    data: {
      ...data
    }
  })
}

//修改后 正常了
export function post (url, data) {
  return axios({
    method: 'post',
    url,
    data: data
  })
}

2.api文件里面引用post封装请求

复制代码

import { post } from '@/axios' //引用axios

//上传文件接口
export function uploadFile(type, data) {
   return post(urlbase+'/user/prompt/upload/'+type,data)
}

3.上传文件组件

复制代码

<template>
    <div>
       <div class="upload" v-show="this.operation!=2">
       <el-button class="but" @click="downloadTemplate">下载导入模板</el-button>
        <el-upload
          :headers="headers"
          accept=".xls, .xlsx, .csv"
          :show-file-list='false'
          class="upload-demo"
          action="#"
          :on-error="uploadFied"
          :before-upload="beforeUploadxls"
          :file-list="fileList">
         <el-button size="small" type="primary">批量导入</el-button>
         <div v-show="!nums" slot="tip"  class="el-upload__tip">支持上传xls、xlsx、csv格式的文件，最大2M</div>
       </el-upload>
       </div>
       <div v-show="this.fielId">
           <ul class="el-upload-list el-upload-list--text" style="position: relative;width: 200px;left:0px;">
            <li tabindex="0" class="el-upload-list__item is-success">
              <a class="el-upload-list__item-name">
                <!-- <i class="el-icon-document"></i> -->
              {{this.fileNmae}}</a>
              <label class="el-upload-list__item-status-label"><i
                class="el-icon-upload-success el-icon-circle-check"></i></label>
              <i  @click="handleRemove" class="el-icon-close"></i>
              <i class="el-icon-close-tip">按 delete 键可删除</i></li>
            </ul>
             <span style="color: darkorange;">导入成功{{this.nums}}条,<span @click="downloads" :disabled='false' style="color: #409EFF;">查看上传结果</span></span>
       </div>
    </div>
</template>

<script>
import {uploadFile,} from '../api/user'

export default {
    props:['value',"num","types","operation"],
   data(){
    return{
     fielId:this.value,
     fileList:[],
     loading:false,
     fileNmae:'',//文件名称
     nums:'',//成功条数
    }
   },
   watch: {
    value(newValue) {
      // console.log('newValue',newValue);
      this.fielId = newValue;
    }
   },
   methods: {
    //上传前验证格式
    beforeUploadxls(file) {
      console.log('file',file);
      const extension = file.name.split(".")[1] === "xls" || file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "csv";
      const isSize = file.size / 1024 / 1024 > 2;
     if (!extension) {
        this.$message.warning("文件格式有误!");
        return false;
      }
     if(isSize){
        this.$message.warning("上传文件大小不能大于2M!");
        return false;
     }
     this.loading = this.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log(111,this.fileList);
      let formdata = new FormData();
      formdata.append("template",file);
      console.log('formdata-file', formdata.get('file'));

      uploadFile(this.types,formdata).then(res=>{
        let {fileId,succeedLine}=res.data
        if(res.code==200){
          this.$message.success(res.message)
          //上传成功赋值
          this.fileNmae=file.name
          this.nums=succeedLine
          this.$emit("input", fileId)
        }else{
          this.$message.error(res.message)
        }
        this.loading.close()
      }).catch((err)=>{
        this.loading.close()
      })
    },
    //查看上传结果
    downloads(){
      
    },
    //下载模板
    downloadTemplate(){
      let a = document.createElement("a");
      a.href = "./template/TipTemplate.xlsx";
      // a.download = "导入模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //删除
    handleRemove(file, fileList){
      console.log('删除');
      this.fielId=''
      this.$emit('input', '')
    },
    //上传失败
    uploadFied(err, file, fileList){
      console.log('失败');
      this.loading.close()
    }
   },
   created() {

   },
   computed:{
     
   }
}
</script>

<style lang="less" scoped>
  .upload{
    display: flex;
    .but{
        height: 33px;
        margin-right: 10px;
    }
    .el-upload__tip{
       position: relative;
       right: 116px;
    }
  }
</style>

导致文件流获取值一直传不到后端，解决办法修改post请求，data写法