腾讯design vue项目 上传桶 腾讯云的桶 对象存储 打包web端项目上传dist

1.说明

将腾讯design 项目上传到 腾讯云的对象存储中 ,但是发现 再这个腾讯design项目中 直接npm run build 打包以后 上传 发现 不能用 需要配置东西

2.解决

使用腾讯云的cos-nodejs-sdk-v5 插件 代码上传

cos-nodejs-sdk-v5 - npm

复制代码
npm i cos-nodejs-sdk-v5 --save

示例:

复制代码
// 引入模块
var COS = require('cos-nodejs-sdk-v5');
// 创建实例
var cos = new COS({
  SecretId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  SecretKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
});

// 存储桶名称,由bucketname-appid 组成,appid必须填入,可以在COS控制台查看存储桶名称。 https://console.cloud.tencent.com/cos5/bucket
var Bucket = 'test-1250000000';
// 存储桶Region可以在COS控制台指定存储桶的概览页查看 https://console.cloud.tencent.com/cos5/bucket/
// 关于地域的详情见 https://cloud.tencent.com/document/product/436/6224
var Region = 'ap-guangzhou';

// 高级上传
cos.uploadFile(
  {
    Bucket: Bucket,
    Region: Region,
    Key: '1.zip',
    FilePath: './1.zip', // 本地文件地址,需自行替换
    SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值,超过5MB使用分块上传,非必须
  },
  function (err, data) {
    console.log(err, data);
  }
);

3.真实解决

①.根目录新建uploadToCOS.js 文件

②. 代码

复制代码
const path = require('path');
const fs = require('fs');
const COS = require('cos-nodejs-sdk-v5');

// 配置腾讯云COS参数
const cos = new COS({
    SecretId: "xxxxxxxxxxxx", // 身份识别 ID
    SecretKey: "xxxxxxxxxx", // 身份密钥
});

// 获取dist目录下的所有文件
const dirPath = path.resolve(__dirname, 'dist');

// 遍历目录并上传文件
function traverseDirectory(dirPath, prefix = '') {
    const files = fs.readdirSync(dirPath);
    files.forEach((file) => {
        const filePath = path.join(dirPath, file);
        const relativePath = path.relative(dirPath, filePath);
        const cosKey = path.join(prefix, relativePath).replace(/\\/g, '/'); // 使用 / 替换 \,确保在 COS 上是正斜杠

        if (fs.statSync(filePath).isDirectory()) {
            // 如果是目录,则继续遍历子目录,并传入新的前缀
            traverseDirectory(filePath, cosKey);
        } else {
            // 如果是文件,则上传文件
            fs.readFile(filePath, (err, data) => {
                if (err) {
                    console.error(`\n读取文件 ${relativePath} 失败:`, err);
                    return;
                }

                const params = {
                    Bucket: 'xxxxxxxxxxx',
                    Region: 'x'x'x'xxxxx',
                    Key: cosKey,
                    Body: data, // 使用文件内容进行上传
                };

                cos.putObject(params, function (err, data) {
                    if (err) {
                        console.log(data);
                        console.error(`\n上传文件 ${relativePath} 失败:`, err);
                    } else {
                        console.log(data);
                        console.log(`\n上传文件 ${relativePath} 成功`);
                    }
                });
            });
        }
    });
}

// 开始遍历上传
traverseDirectory(dirPath);

③.控制台执行代码

复制代码
node uploadToCOS.js
相关推荐
灿灿121384 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴22 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack40 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691343 分钟前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css