cool-admin-midway 使用腾讯云cos上传图片

devtools/2025/3/21 22:04:20/

说明:在使用cool-admin这个低代码平台时,发现官方的cos上传插件有问题,总是报错 substring,故自己找解决方案,修改本地的upload方法改为云端上传。


解决方案:

  1. 安装腾讯云cos的nodeJS SDK
pnpm i cos-nodejs-sdk-v5
  1. admin-midway/src/modules/plugin/hooks/upload 目录下新建工具文件upload_cos.ts 内容如下:
const COS: any = require('cos-nodejs-sdk-v5');
import fs = require('fs');// 定义配置接口
interface CosConfig {Bucket?: string;Region?: string;Prefix?: string;
}// 定义上传参数接口
interface PutObjectParam {key: string;buffer: fs.ReadStream | Buffer;
}class CosUtil {private cos;private Bucket: string;private Region: string;private Prefix: string;// 构造函数,初始化配置constructor(config?: CosConfig) {this.Bucket = config?.Bucket || 'mybucket-xxxxxx'; // 存储桶名称this.Region = config?.Region || 'ap-guangzhou'; // 存储桶区域this.Prefix = config?.Prefix || ''; // 路径前缀// 初始化 COS 实例this.cos = new COS({SecretId: 'xxxxxx', // 密钥idSecretKey: 'xxxxxx', // 密钥key});}// 上传文件方法public putObject(param: PutObjectParam): Promise<any> {return new Promise((resolve, reject) => {this.cos.putObject({Bucket: this.Bucket, // 必须Region: this.Region, // 必须Key: param.key, // 必须Body: param.buffer, // 必须},(err: Error, data: any) => {if (err) {reject(err);return;}resolve(data);});});}// 提取图片链接中的图片名称public getName(imageUrl: string): string {// 解析 URLconst parsedUrl = new URL(imageUrl);// 获取路径部分const pathname = parsedUrl.pathname;// 提取文件名const imageName = pathname.split('/').pop() || '';return imageName;}
}export default CosUtil;
  1. 修改上述目录下的index.ts文件:
// ... existing code ...
import CosUtil from './upload_cos';
// ... existing code ...// 修改之前的上传文件代码/*** 上传文件* @param ctx* @param key 文件路径*/async upload(ctx: any) {const { domain } = this.pluginInfo.config;const uploadUtil = new CosUtil();try {const { key } = ctx.fields;if (key &&(key.includes('..') ||key.includes('./') ||key.includes('\\') ||key.includes('//'))) {throw new CoolCommException('非法的key值');}if (_.isEmpty(ctx.files)) {throw new CoolCommException('上传文件为空');}const basePath = pUploadPath();const file = ctx.files[0];const extension = file.filename.split('.').pop();const name =moment().format('YYYYMMDD') + '/' + (key || `${uuid()}.${extension}`);const target = path.join(basePath, name);const dirPath = path.join(basePath, moment().format('YYYYMMDD'));if (!fs.existsSync(dirPath)) {fs.mkdirSync(dirPath);}const data = fs.readFileSync(file.data);fs.writeFileSync(target, data);// 主要变动在这里,key:上传图片的名称(带后缀),buffer:图片的bufferconst cosResult = await uploadUtil.putObject({key: name,buffer: data,});return `https://${cosResult.Location}`;} catch (err) {console.error(err);throw new CoolCommException('上传失败' + err.message);}}

通过以上修改,原来的upload方法及前端组建调用上传方法会得到返回的腾讯云cos存储桶中图片的访问地址,add接口也会把该地址存储到数据库中。

此时admin-node/src/modules/plugin/config.tsdomain参数将会失效

// 基础插件配置hooks: {// 文件上传upload: {// 地址前缀domain: ``,},},

由于是非正式项目,存储桶访问权限设置的是公有读写,不需要做身份验证。如有需要可查看官方文档:设置存储桶访问权限


http://www.ppmy.cn/devtools/168998.html

相关文章

CMS漏洞-WordPress篇

一.姿势一&#xff1a;后台修改模板拿WebShell 1.使用以下命令开启docker cd /www/wwwroot / vulhub / wordpress / pwnscriptum docker - compose up - d 如果发现不能开启&#xff0c;可以检查版本和端口 2.访问网址登录成功后 外观 &#x1f449;编辑 &#x1f449;404.…

Python第六章04:列表操作练习题

# 列表常用功能练习题 """ 有一个列表&#xff0c;内容是&#xff1a;[21,25,21,23,22,20],记录一批学生的年龄请通过列表的功能&#xff08;方法&#xff09;&#xff0c;对齐进行&#xff1a; 1.定义这个列表&#xff0c;并用变量接收它 2.追加一个数字31&…

【SpringCloud】Eureka、LoadBalancer和Nacos

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【中间件】企业级中间件剖析 一、微服务 单体架构 单体架构是一种传统的软件架构方式&#xff0c;它将一个应用程序的所有功能模块&#xff08;如用户认证、订单处理、数据存储等&#xff09;都打包在…

Web3网络生态中数据保护合规性分析

Web3网络生态中数据保护合规性分析 在这个信息爆炸的时代&#xff0c;Web3网络生态以其独特的去中心化特性&#xff0c;逐渐成为数据交互和价值转移的新平台。Web3&#xff0c;也被称为去中心化互联网&#xff0c;其核心理念是将数据的控制权归还给用户&#xff0c;实现数据的…

ubuntu24.04安装VMware Tools

虚拟机创建ubuntu24.04&#xff0c;安装VMware Tools&#xff0c; sudo apt update sudo apt install open-vm-tools sudo reboot 之后可以创建共享文件夹用于主机和虚拟机之间传输文件。 在虚拟机-设置-选项-共享文件夹&#xff0c;中点选“总是启用”并添加共享路径和在…

Python(冒泡排序、选择排序、插入法排序、快速排序,算法稳定性)

算法的稳定性 冒泡排序 # 冒泡排序 # 1 思想: 相邻位置两个元素比较, 前面的元素比后面的元素大则交换, 把最大的数给找到 # 经过一轮一轮的比较最终把序列给排序 # 2 关键点1: 两层for循环 外层循环控制多少轮 内层for循环控制比较次数 # 3 关键点2: 若遍历一遍没有数字…

【区块链+乡村振兴】国链区块链农产品溯源系统 | FISCO BCOS 应用案例

国链区块链农产品溯源系统通过集中管理和调度计算资源&#xff0c;结合区块链技术&#xff0c;为企业提供高效、安全、可靠的农产品全链条溯源服务。 系统的技术架构包括分布式架构、区块链平台、数据存储、前端应用和物联网设备等。其分布式架构采用多节点部署&#xff0c;提…

VSCode创建VUE项目(三)使用axios调用后台服务

1. 安装axios,执行命令 npm install axios 2. 在 main.ts 中引入并全局挂载 Axios 实例 修改后的 代码&#xff08;也可以单独建一个页面处理Axios相关信息等&#xff0c;然后全局进行挂载&#xff09; import { createApp } from vue import App from ./App.vue import rou…