cloud-storage-web by tencentcloudbase/skills
npx skills add https://github.com/tencentcloudbase/skills --skill cloud-storage-web当构建需要通过 @cloudbase/js-sdk (Web SDK) 使用 CloudBase 云存储来上传、下载或管理文件的 Web 应用程序时,请使用此技能。
在 Web 应用程序中需要进行文件存储操作时使用此技能,例如:
请勿用于:
uploadFile - 用于从浏览器上传文件到云存储getTempFileURL - 用于生成临时下载链接deleteFile - 用于从存储中删除文件广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
downloadFile - 用于下载文件到浏览器[0-9a-zA-Z]、/、!、-、_、.、 、*、中文字符/ 创建文件夹结构(例如,folder/file.jpg)import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "your-env-id", // 替换为你的 CloudBase 环境 ID
});
初始化规则:
app 实例const result = await app.uploadFile({
cloudPath: "folder/filename.jpg", // 云存储中的文件路径
filePath: fileInput.files[0], // HTML 文件输入元素
});
// 结果包含:
{
fileID: "cloud://env-id/folder/filename.jpg", // 唯一文件标识符
// ... 其他元数据
}
const result = await app.uploadFile({
cloudPath: "uploads/avatar.jpg",
filePath: selectedFile,
method: "put", // "post" 或 "put" (默认: "put")
onUploadProgress: (progressEvent) => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`上传进度: ${percent}%`);
// 在此处更新 UI 进度条
}
});
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
cloudPath | string | 是 | 包含文件名的绝对路径(例如 "folder/file.jpg") |
filePath | File | 是 | HTML 文件输入对象 |
method | "post" | "put" | 否 |
onUploadProgress | function | 否 | 进度回调函数 |
[0-9a-zA-Z]、/、!、-、_、.、 、*、中文字符/ 创建文件夹层级"avatar.jpg""uploads/avatar.jpg""user/123/avatar.jpg"⚠️ 重要: 为防止 CORS 错误,请将你的域名添加到 CloudBase 控制台:
https://your-app.com,http://localhost:3000)const result = await app.getTempFileURL({
fileList: [
{
fileID: "cloud://env-id/folder/filename.jpg",
maxAge: 3600 // URL 有效期为 1 小时(秒)
}
]
});
// 访问下载 URL
result.fileList.forEach(file => {
if (file.code === "SUCCESS") {
console.log("下载 URL:", file.tempFileURL);
// 使用此 URL 下载或显示文件
}
});
const result = await app.getTempFileURL({
fileList: [
{
fileID: "cloud://env-id/image1.jpg",
maxAge: 7200 // 2 小时
},
{
fileID: "cloud://env-id/document.pdf",
maxAge: 86400 // 24 小时
}
]
});
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
fileList | Array | 是 | 文件对象数组 |
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
fileID | string | 是 | 云存储文件 ID |
maxAge | number | 是 | URL 有效期(秒) |
{
code: "SUCCESS",
fileList: [
{
code: "SUCCESS",
fileID: "cloud://env-id/folder/filename.jpg",
tempFileURL: "https://temporary-download-url"
}
]
}
maxAge(1 小时到 24 小时)SUCCESS/ERROR 代码const result = await app.deleteFile({
fileList: [
"cloud://env-id/folder/filename.jpg"
]
});
// 检查删除结果
result.fileList.forEach(file => {
if (file.code === "SUCCESS") {
console.log("文件已删除:", file.fileID);
} else {
console.error("删除失败:", file.fileID);
}
});
const result = await app.deleteFile({
fileList: [
"cloud://env-id/old-avatar.jpg",
"cloud://env-id/temp-upload.jpg",
"cloud://env-id/cache-file.dat"
]
});
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
fileList | Array | 是 | 要删除的文件 ID 数组 |
{
fileList: [
{
code: "SUCCESS",
fileID: "cloud://env-id/folder/filename.jpg"
}
]
}
const result = await app.downloadFile({
fileID: "cloud://env-id/folder/filename.jpg"
});
// 文件将下载到浏览器默认下载位置
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
fileID | string | 是 | 云存储文件 ID |
{
// 成功响应(不返回特定数据)
// 文件已下载到浏览器
}
getTempFileURL所有存储操作都应包含适当的错误处理:
try {
const result = await app.uploadFile({
cloudPath: "uploads/file.jpg",
filePath: selectedFile
});
if (result.code) {
// 处理错误
console.error("上传失败:", result.message);
} else {
// 成功
console.log("文件已上传:", result.fileID);
}
} catch (error) {
console.error("存储操作失败:", error);
}
INVALID_PARAM - 参数无效PERMISSION_DENIED - 权限不足RESOURCE_NOT_FOUND - 文件未找到SYS_ERR - 系统错误uploads/、avatars/、documents/)每周安装量
571
仓库
GitHub 星标
39
首次出现
2026 年 1 月 22 日
安全审计
已安装于
opencode499
codex498
gemini-cli489
github-copilot476
kimi-cli469
cursor468
Use this skill when building web applications that need to upload, download, or manage files using CloudBase cloud storage via the @cloudbase/js-sdk (Web SDK).
Use this skill for file storage operations in web applications when you need to:
Do NOT use for:
Initialize CloudBase SDK
Choose the right storage method
uploadFile - For uploading files from browser to cloud storagegetTempFileURL - For generating temporary download linksdeleteFile - For deleting files from storagedownloadFile - For downloading files to browserHandle CORS requirements
Follow file path rules
[0-9a-zA-Z], /, !, -, _, ., , *, Chinese characters/ for folder structure (e.g., folder/file.jpg)import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "your-env-id", // Replace with your CloudBase environment ID
});
Initialization rules:
app instance across your applicationconst result = await app.uploadFile({
cloudPath: "folder/filename.jpg", // File path in cloud storage
filePath: fileInput.files[0], // HTML file input element
});
// Result contains:
{
fileID: "cloud://env-id/folder/filename.jpg", // Unique file identifier
// ... other metadata
}
const result = await app.uploadFile({
cloudPath: "uploads/avatar.jpg",
filePath: selectedFile,
method: "put", // "post" or "put" (default: "put")
onUploadProgress: (progressEvent) => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`Upload progress: ${percent}%`);
// Update UI progress bar here
}
});
| Parameter | Type | Required | Description |
|---|---|---|---|
cloudPath | string | Yes | Absolute path with filename (e.g., "folder/file.jpg") |
filePath | File | Yes | HTML file input object |
method | "post" | "put" | No |
onUploadProgress | function | No | Progress callback function |
[0-9a-zA-Z], /, !, -, _, ., , *, Chinese characters/ to create folder hierarchy"avatar.jpg"⚠️ IMPORTANT: To prevent CORS errors, add your domain to CloudBase console:
https://your-app.com, http://localhost:3000)const result = await app.getTempFileURL({
fileList: [
{
fileID: "cloud://env-id/folder/filename.jpg",
maxAge: 3600 // URL valid for 1 hour (seconds)
}
]
});
// Access the download URL
result.fileList.forEach(file => {
if (file.code === "SUCCESS") {
console.log("Download URL:", file.tempFileURL);
// Use this URL to download or display the file
}
});
const result = await app.getTempFileURL({
fileList: [
{
fileID: "cloud://env-id/image1.jpg",
maxAge: 7200 // 2 hours
},
{
fileID: "cloud://env-id/document.pdf",
maxAge: 86400 // 24 hours
}
]
});
| Parameter | Type | Required | Description |
|---|---|---|---|
fileList | Array | Yes | Array of file objects |
| Parameter | Type | Required | Description |
|---|---|---|---|
fileID | string | Yes | Cloud storage file ID |
maxAge | number | Yes | URL validity period in seconds |
{
code: "SUCCESS",
fileList: [
{
code: "SUCCESS",
fileID: "cloud://env-id/folder/filename.jpg",
tempFileURL: "https://temporary-download-url"
}
]
}
maxAge based on use case (1 hour to 24 hours)SUCCESS/ERROR codes in responseconst result = await app.deleteFile({
fileList: [
"cloud://env-id/folder/filename.jpg"
]
});
// Check deletion results
result.fileList.forEach(file => {
if (file.code === "SUCCESS") {
console.log("File deleted:", file.fileID);
} else {
console.error("Failed to delete:", file.fileID);
}
});
const result = await app.deleteFile({
fileList: [
"cloud://env-id/old-avatar.jpg",
"cloud://env-id/temp-upload.jpg",
"cloud://env-id/cache-file.dat"
]
});
| Parameter | Type | Required | Description |
|---|---|---|---|
fileList | Array | Yes | Array of file IDs to delete |
{
fileList: [
{
code: "SUCCESS",
fileID: "cloud://env-id/folder/filename.jpg"
}
]
}
const result = await app.downloadFile({
fileID: "cloud://env-id/folder/filename.jpg"
});
// File is downloaded to browser default download location
| Parameter | Type | Required | Description |
|---|---|---|---|
fileID | string | Yes | Cloud storage file ID |
{
// Success response (no specific data returned)
// File is downloaded to browser
}
getTempFileURL insteadAll storage operations should include proper error handling:
try {
const result = await app.uploadFile({
cloudPath: "uploads/file.jpg",
filePath: selectedFile
});
if (result.code) {
// Handle error
console.error("Upload failed:", result.message);
} else {
// Success
console.log("File uploaded:", result.fileID);
}
} catch (error) {
console.error("Storage operation failed:", error);
}
INVALID_PARAM - Invalid parametersPERMISSION_DENIED - Insufficient permissionsRESOURCE_NOT_FOUND - File not foundSYS_ERR - System erroruploads/, avatars/, documents/)Weekly Installs
571
Repository
GitHub Stars
39
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode499
codex498
gemini-cli489
github-copilot476
kimi-cli469
cursor468
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装
"uploads/avatar.jpg""user/123/avatar.jpg"