云开发 JavaScript 实战 | tcb-js-sdk 实现图片上传功能

2024-01-05 03:30:29

云开发 JavaScript 实战 | 如何使用 tcb-js-sdk 实现图片上传功能

云开发 JavaScript SDK（tcb-js-sdk）可以让开发者在网页端使用 JavaScript 代码调用云开发的服务，轻松构建自己的公众号页面或独立网站等 Web 服务。本篇文章将以实现图片上传功能为例，介绍 tcb-js-sdk 的基本配置流程。你也可以参考技术文档了解更多：https:/...

1. 安装 tcb-js-sdk

npm install @cloudbase/js-sdk

2. 初始化 tcb-js-sdk

const tcb = require('@cloudbase/js-sdk');
const app = tcb.init({
  env: 'your-env-id',
});

3. 获取文件对象

const file = document.getElementById('file-input').files[0];

4. 上传文件

app.uploadFile({
  cloudPath: 'your-cloud-path',
  file,
  onUploadProgress: (progressEvent) => {
    // 上传进度
  },
}).then((res) => {
  // 上传成功
}).catch((err) => {
  // 上传失败
});

5. 获取文件 URL

app.getFileUrl({
  cloudPath: 'your-cloud-path',
}).then((res) => {
  // 文件 URL
}).catch((err) => {
  // 获取文件 URL 失败
});

6. 示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <input type="file" id="file-input" />
  <button id="submit-button">上传</button>
  <script src="tcb-js-sdk.js"></script>
  <script>
    const tcb = require('@cloudbase/js-sdk');
    const app = tcb.init({
      env: 'your-env-id',
    });
    document.getElementById('submit-button').addEventListener('click', () => {
      const file = document.getElementById('file-input').files[0];
      app.uploadFile({
        cloudPath: 'your-cloud-path',
        file,
        onUploadProgress: (progressEvent) => {
          // 上传进度
        },
      }).then((res) => {
        // 上传成功
      }).catch((err) => {
        // 上传失败
      });
    });
  </script>
</body>
</html>