el-upload 图片上传返回 400 错误的常见原因

el-upload 图片上传报错 400 原因剖析

很多朋友在使用 el-upload 组件上传图片时，可能会遇到状态码为 400 的报错。这通常是由无效的 token 导致的，但配置了全局拦截器后仍然出现这种情况，确实让人百思不得其解。

本文将深入分析 el-upload 上传图片返回 400 的原因，并提供针对性的解决方案。

问题原因

el-upload 组件在上传图片时，需要携带一个名为 token 的参数。这个 token 是一个经过加密的字符串，用于验证上传请求的合法性。

当上传图片时，el-upload 会自动生成一个 token，并将其附加到请求中。但是，如果该 token 无效，服务器就会返回 400 错误。

无效 token 的常见原因

导致 token 无效的原因主要有以下几种：

• 全局拦截器未正确设置： 虽然配置了全局拦截器，但可能未正确设置 token。
• 请求携带的 token 已过期： token 具有有限的有效期，如果请求携带的 token 已过期，也会导致 400 错误。
• 跨域问题： 如果你的前端和后端部署在不同的域名下，可能会出现跨域问题，导致 token 无法传递。

解决方案

根据以上原因，我们可以采取以下措施解决问题：

1. 检查全局拦截器：

确保全局拦截器中正确设置了 token，并且 token 是有效的。

2. 设置 token 有效期：

在后端设置 token 的有效期，并确保上传请求在 token 有效期内发出。

3. 解决跨域问题：

如果存在跨域问题，可以使用 CORS（跨域资源共享）解决。具体做法是，在后端服务器设置 CORS 头，允许前端域名访问 API。

4. 查看后端日志：

如果以上方法都无法解决问题，可以查看后端服务器的日志，获取更详细的错误信息。

具体案例

我们以一个具体的案例来说明：

假设我们使用 Vue.js + Element UI 搭建了一个前端项目，并使用 Axios 作为 HTTP 请求库。全局拦截器如下：

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 设置 token 到请求头中
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

然后，在上传图片时，我们使用 el-upload 组件，代码如下：

<el-upload
  :action="uploadUrl"
  :show-file-list="false"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
></el-upload>

如果此时仍然出现 400 错误，我们可以根据上述原因进行逐一排查。

提示：