接口地址出现乱码-CFANZ编程社区

当使用 ElementUI 上传 Excel 文件到接口时，接口地址出现乱码可能由以下几种原因导致：

1. 编码问题

前端编码设置不当：如果前端页面的字符编码设置不正确，可能会导致接口地址在传输过程中出现乱码。确保 HTML 文件的头部设置了正确的字符编码，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ElementUI 上传示例</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

后端编码处理不一致：后端在接收请求时，如果没有正确处理字符编码，也可能导致地址解析出现问题。确保后端服务器设置了正确的字符编码，比如在 Node.js 中使用 express 框架时，可以这样设置：

const express = require('express');
const app = express();
app.use(express.json({ limit: '10mb', extended: true, type: 'application/json', charset: 'utf-8' }));
app.use(express.urlencoded({ limit: '10mb', extended: true, type: 'application/x-www-form-urlencoded', charset: 'utf-8' }));

2. 地址拼接错误

动态拼接地址时出错：如果接口地址是通过动态拼接生成的，可能在拼接过程中引入了非法字符或者没有正确处理特殊字符。例如，在 JavaScript 中拼接地址时：

const baseUrl = 'http://example.com';
const path = '/upload';
const fullUrl = baseUrl + path;

确保拼接过程中没有意外添加或修改地址的内容。

3. 数据传输问题

请求头设置错误：在发送请求时，如果请求头设置不正确，可能会影响地址的传输。确保在使用 ElementUI 的上传组件时，请求头的设置符合接口要求。例如：

<el-upload
    action="http://example.com/upload"
    :headers="{ 'Content-Type': 'multipart/form-data' }"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>