elementui的upload组件根据后端接口上传文件到服务器失败,需要传参-header头部传参和params传参

1.适用场景

先上原来的代码看一下嘛

   <el-upload :action="upload.url" :limit="1" accept=".xlsx, .xls" :file-list="fileList"
            class="el-upload" :on-success="handleChange" >
            <el-button type="danger" class="query-btn" icon="el-icon-plus" v-if="isAdmin">导入</el-button>
          </el-upload>
//data
 upload: {
  // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/qysf/vKnow/importData',

      },

结果在选择了文件调用接口后返回的是200状态码,以为也是正确的
在这里插入图片描述
结果返回的消息是
在这里插入图片描述
返回的确是有问题的,后来反复排错才发现是没有header头部
在这里插入图片描述

2.解决思路

我这里现在不仅要传个header信息,业务上还需要一个参数

   <el-upload :action="upload.url" :headers="upload.headers" :limit="1" accept=".xlsx, .xls" :file-list="fileList"
            class="el-upload" :on-success="handleChange" :data="{updateSupport:upload.updateSupport}">
            <el-button type="danger" class="query-btn" icon="el-icon-plus" v-if="isAdmin">导入</el-button>
          </el-upload>
 //data
          upload: {
        // 是否更新已经存在的数据
        updateSupport: true,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/qysf/vKnow/importData',

      },      

再次调用接口
在这里插入图片描述
加上了token
在这里插入图片描述
传参也多了一个

在这里插入图片描述
接口响应也正常,搞定!

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐