Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 (保存原有存储目录结构)

1、在项目根目录创建uploadToCOS.js文件 (建议起简单的名字 方便以后上传输入命令方便)

2、uploadToCOS.js文件代码编写

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

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

// 获取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: '',
                    Region: '',
                    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);

填入你自己的 SecretId、SecretKey、Bucket、Region

3、在控制台输入

复制代码
node uploadToCOS.js

直到所有文件传输完成

记得在此之前开放存储桶跨域访问权限

这个可以看我另一篇文章

(151条消息) 上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】_白开水为啥没味的博客-CSDN博客

相关推荐
莱昂晨1 分钟前
Vue 3偶发字体乱码 - 原因探究
前端·javascript·vue.js
AlkaidSTART1 分钟前
0 基础入门 Zustand:新手友好的 React 状态管理方案
前端·javascript
我命由我123454 分钟前
HTML 开发 - HTML 描述列表标签(<dl>、<dt>、<dd>)
前端·javascript·css·html·css3·html5·js
榴莲omega10 分钟前
正则表达式入门与实战指南
javascript·正则表达式·js八股
前进的李工24 分钟前
SSH隧道实现Dify与Ollama跨服务器通信
开发语言·大模型·github·腾讯云·autodl·dify
Southern Wind25 分钟前
Vue 3 + Naive UI 企业级后台管理系统完整解析
前端·vue.js·ui·typescript
清汤饺子26 分钟前
AI 编程新范式:Spec First 的四件套,让 AI 不再是"热情但跑偏的实习生"
前端·javascript·后端
坐吃山猪26 分钟前
TypeScript编程04-函数
javascript·ubuntu·typescript
LXXgalaxy28 分钟前
小程序文件上传怎么做?一套可复用的 UniApp 上传+预览 Demo
javascript·vue.js·uni-app
wangjinsheng59332 分钟前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程