困扰了我一下午终于把Strapi5打通了阿里云OSS，配置很简单

在使用strapi的媒体库上传文件采用OSS云存储时带来的bug，我是如何来一一解决的, strapi默认的本地存储是没有问题，存储目录默认为public

以下方式使用strapi4 和 strapi5测试正常通过

安装OSS插件

shell 复制代码

pnpm install strapi-provider-upload-oss --save

基础配置

js 复制代码

// config/plugins.js
module.exports = ({ env }) => ({  
    upload: {  
        config: {  
            provider: 'strapi-provider-upload-oss', // 插件名称
                providerOptions: {  
                accessKeyId: env('ACCESS_KEY_ID'), // 阿里云OSS ACCESS_KEY_ID  
                accessKeySecret: env('ACCESS_KEY_SECRET'), // 阿里云OSS ACCESS_KEY_SECRET  
                region: env('REGION'), // 我申请的是选择的 oss-cn-beijing  
                bucket: env('BUCKET'), // 申请OSS的填写的的值  test_imgs
                uploadPath: env('UPLOAD_PATH'),  // 上传到的文件目录 可以自己设置一个
                baseUrl: env('BASE_URL'),  // https://test_imgs.oss-cn-beijing.aliyuncs.com
                timeout: env('TIMEOUT'),  // 60000
                secure: env('OSS_SECURE'),  // 是否启用https
                internal: env.bool('OSS_INTERNAL', false),  // 这个有官网有解释，设置false就行
                // 我这里选择公共访问，所以这里关闭了,如果需要跟阿里云设置的保持一致，见下方图，
                // bucketParams: {  
                    // ACL: 'private', // default is 'public-read', // 类型
                    //signedUrlExpires: 60 * 60 // default is 30 * 60 (30min) // 过期时间
                //}  
            }  
        }  
    }  
});

strapi-provider-upload-oss官网地址

.env文件，在项目根目录

shell 复制代码

ACCESS_KEY_ID=LTAI5tDufgoUzep8itqc
ACCESS_KEY_SECRET=baWA8dqXAohsmqCOs89S
REGION=oss-cn-beijing
BUCKET=test_imgs
BASE_URL=https://test_imgs.oss-cn-beijing.aliyuncs.com
TIMEOUT=60000
UPLOAD_PATH=''

中间件文件配置

js 复制代码

//config/middlewares.js
module.exports = [
  'strapi::logger',
  'strapi::errors',
  {
      name: 'strapi::security',
      config: {
          // 这个配置没有多大区别，照这样配置就行
          contentSecurityPolicy: {
              useDefaults: true,
              directives: {
                  "connect-src": ["'self'", "https:"],
                  "img-src": ["'self'", "data:", "blob:", "https://test_imgs.oss-cn-beijing.aliyuncs.com"],
                  "media-src": ["'self'", "data:", "blob:", "https://test_imgs.oss-cn-beijing.aliyuncs.com"],
                  upgradeInsecureRequests: null,
              },
          },
          referrerPolicy: {
              policy: ["origin"],
          }
      },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  'global::interception'
];

配置完成以后，运行项目

发现多了一个前缀

我经过搜索引擎一顿猛搜，并没有解决这个问题，于是我开始下载源码找答案，在源码出找到一个显示的页面，在去找是如何拼接这一个的前缀的

在源码处找到一样段代码

js 复制代码

// 发现所有图片预览走了这个方法
export const prefixFileUrlWithBackendUrl = (fileURL?: string) => {
  return !!fileURL && fileURL.startsWith('/') ? `${window.strapi.backendURL}${fileURL}` : fileURL;
};

在浏览器打印， window.strapi.backendURL，果然就是这里出了叉子

我们复制prefixFileUrlWithBackendUrl这些个函数去官方搜索，看看有什么新发现

官方大概意思是这个可以重写前缀的函数，但是现在已经被弃用了，如果需要自己去实现插件

我们继续带着这个函数prefixFileUrlWithBackendUrl去搜索引擎上搜，发一个插件前缀插件strapi-plugin-media-prefix

这样一看不是我们想要的答案嘛

安装 strapi-plugin-media-prefix

swift 复制代码

pnpm install strapi-plugin-media-prefix

js 复制代码

// config/plugins.js
export default () => ({
  "media-prefix": {
    enabled: true,
  },
});

这里的环境变量名称为MEDIA_PREFIX配置为//即可，这样就可以oss的链接形成//test_imgs.oss-cn-beijing.aliyuncs.com

.env文件

shell 复制代码

MEDIA_PREFIX = //

重新运行strapi，进行测试

成功解决此问题，有遇到此类问题朋友，可以参考，代码已上传GitHub