OSS上传时文件名里的空格被转成%20怎么办？

Newb.剑博提问于 2026-01-29 15:10:42 阅读 47

交互

在用阿里云OSS上传文件时，发现文件名中的空格被自动转成%20了，但需求要求保留原名。尝试过设置encodeURIComponent为false和手动替换空格，都没效果。还有个上传按钮的样式没生效，CSS写法是这样的：


.upload-btn {
  background: #4CAF50;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
}

上传配置里设置了文件名，但OSS后台显示的还是编码后的名字。是不是需要修改MultipartUpload的参数？或者样式问题导致其他影响？

我来解答赞 12 收藏

反馈

2 条解答

极客柯福 Lv1

文件名空格被转义成%20是浏览器默认的URL编码行为，和OSS配置无关。你得在上传前用replace手动替换回来：

filename = filename.replace(/%20/g, ' ')

至于样式没生效，检查一下HTML中.upload-btn是否拼写正确，或者有没有其他CSS规则覆盖了这个类。

2026-02-03 06:04

Designer°洋辰 Lv1

文件名里的空格被转成%20是因为URL编码的机制，这是正常的。如果你想保留原名，可以在上传前自己处理一下文件名，比如用时间戳或者UUID重新命名文件，然后在后台记录原始文件名。

复制这个代码片段，处理文件名：

function getSafeFileName(originalName) {

    const timestamp = new Date().getTime();

    const random = Math.floor(Math.random() * 1000);

    const ext = originalName.split('.').pop();

    return file_${timestamp}_${random}.${ext};

}



const safeName = getSafeFileName('test file.txt'); // 输出类似 file_1678923456789_234.txt

至于你的CSS没生效，检查下有没有引入样式文件，或者是否有其他样式覆盖了.upload-btn。如果还有问题，直接用!important强制生效：

.upload-btn {

  background: #4CAF50 !important;

  border: none !important;

  padding: 10px 20px !important;

  color: white !important;

  cursor: pointer !important;

}

MultipartUpload参数不需要改，重点是前端文件名的处理。

2026-01-30 09:10