社区/文章分享/云开发 Web SDK 如何实现图片上传功能?

云开发 Web SDK 如何实现图片上传功能?

前 言

tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务[1]。本文将以实现图片上传功能为例,介绍 tcb-js-sdk 的基本配置流程。

在使用云开发 Cloudbase 开发应用的过程中,除了借助云开发提供的数据库存储数据以外,常常还会遇到需要实现图片上传功能的需求,在这种情况下,可以通过 tcb-js-sdk 来完成图片上传的功能。接下来,我们来开发一个简易的图片上传功能作为演示。

主要流程:

1. 引入 tcb-js-sdk

想要使用 tcb-js-sdk 来完成开发,我们需要在项目中引入 tcb-js-sdk ,从而可以借助其提供的 API 实现简单的调用云开发各项能力。

在具体的接入时,可以根据你的项目类型,选择使用 CDN 接入还是通过包管理器接入,这里我使用 CDN 来完成接入。

在项目中添加如下代码,并根据 NPM 上的说明,选择最新版本的 SDK ,比如当前最新版本是 1.7.1 版本,就可以将下方代码中的 ${version} 替换为 1.7.1 。

<script src="//imgcache.qq.com/qcloud/tcbjs/${version}/tcb.js"></script>
<script>
  const app = tcb.init({
    env: 'your-env-id'  //填写云环境ID
  });
const auth = app.auth();
</script>

2. 配置用户登录

云开发的 API 调用需要用户具备身份,为了简化,这里我选择使用匿名登录,这样就可以更简单的完成项目的开发。关于匿名登录的用户配置,你可以在云开发的官方文档[2]中找到相关的说明。当你将你的登录配置成下图的样式,就说明配置好了用户登录。

此外,你还需要将需要调用云开发 SDK 的网页配置到安全域名中,从而确保可以正常调用 API 接口。

在完成了用户登录的配置以后,可以在项目代码中加入用户匿名登录的配置。

<script>
  const app = tcb.init({
    env: 'your-env-id'  //填写云环境ID
  });
const auth = app.auth();

auth.anonymousAuthProvider().signIn()   // 匿名登录,实际业务时根据需要进行调整
.then(() => {
    console.log("登陆成功") //登录成功
}).catch(err => {
    console.log("登录失败",err) //登录失败
})

3. 编写上传代码

在完成了基础的用户登录后,就可以编写具体的上传代码了。

在具体的实现过程中,我在页面中放置了一个按钮,用作图片选择,并放置一个 Button 用来确认选择,并提交选择。具体的页面结构代码如下:

<div id="upload" >
  <input id="pic"  type="file" accept="image/png,image/jpg,image/jpeg" name="pic" />
+
</div>
<div id="summit" onclick="upload()">上传</div>
<div id="preview"></div>

有了页面的代码,我们就可以通过编写代码来获取我们所选择的文件,并将其上传到云存储中,获得访问链接。

具体的获取文件的代码如下:

var fileinput = document.getElementById("pic"),
  preview = document.getElementById("preview"); // 获取对象
fileinput.addEventListener("change", function () {
  //监听 input 的 change事件
  if (!fileinput.value) {
    // 判断当前是否有文件
    console.log("no pic");
    return;
  } else {
    console.log("success");
  }
  var file = fileinput.files[0]; //如果有,则获取到文件
  if (
    file.type !== "image/jpeg" &&
    file.type !== "image/png" &&
    file.type !== "image/jpg"
  ) {
    //判断文件是否符合img
    alert("仅支持jpeg和png");
    fileinput.value = ""; //如不符合则清空value以及backgroundImage
    preview.style.backgroundImage = "url(#)";
    return;
  } else {
    var reader = new FileReader();
    reader.onload = function (e) {
      var data = e.target.result;
      preview.style.backgroundImage = "url(" + data + ")";
    };
    reader.readAsDataURL(file);
    console.log(file.name);
  }
});

当我们拿到数据以后,我们就可以借助 app.uploadFile将其上传到云存储中,实现本地文件的上传。

function upload() {
  app
    .uploadFile({
      // 云端路径
      cloudPath: document.getElementById("pic").files[0].name,
      // 需要上传的文件,File 类型
      filePath: document.getElementById("pic").files[0],
    })
    .then((res) => {
      // 返回文件 ID
      console.log(res.fileID);
      console.log("上传成功");
    });
}

另外,如果你在上传完成后,希望获取到图片的下载地址,则可以调用

app.getTempFileURL 来获取图片的访问地址。


 app
  .getTempFileURL({
    fileList: [res.fileID]//要下载的文件 ID 组成的数组 本示例填写为上面代码的文件id
  })
  .then(res => {
    res.fileList.forEach((el) => {
      if(el.code === 'SUCCESS') {
        console.log(el.tempFileURL)//打印下载地址
      } else {
        console.log('获取地址失败')//获取地址失败
      }
    })
  });
}

4. 部署应用上线

在完成了基础功能的编写后,我们可以借助云开发提供的静态托管能力,快速将项目部署上线。

首先,在云开发控制台中开通静态托管服务:

接着,安装 Cloudbase Framework,来实现快速部署:

npm install -g @cloudbase/cli@beta # 安装 cloudbase framework
cloudbase login # 登录
cd 项目目录
cloudbase init --without-template # 初始化部署模板
cloudbase framework:deploy # 部署项目

最后,根据提示,完成部署,就可以看到我们的项目的访问地址。

总结

通过引入 tcb-js-sdk ,我们可以十分方便的在 Web 应用中引入云开发的文件存储系统。基于此,前端开发者可以更加简单的完成数据存储相关逻辑的编写,特别是一些快节奏的业务开发,可以借助 tcb-js-sdk 实现业务需求。

点击文末左下角【阅读原文】获取项目源码。

[1] tcb-js-sdk 主页:

https://github.com/TencentCloudBase/tcb-js-sdk#readme

[2] 云开发登录认证文档:

https://docs.cloudbase.net/api-reference/web/authentication.html#app-auth