如何使用云开发进行图片上传

原创

Doggy

修改于 2020-07-03 17:21:16

3.1K0

修改于 2020-07-03 17:21:16

文章被收录于专栏：神奇的云开发！

前言

云开发，相信大家都不陌生，在我们的日常开发中，总少不了需要把图片进行上传的应用场景。

本文将介绍如何使用云开发进行图片上传并部署到云开发静态网站托管。

初始化

首先我们要引入tcb-js-sdk

tcb-js-sdk 让您可以在 Web 端（如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 Cloudbase 服务和资源。

方法一：通过CDN引入

<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>

最新的版本号 version 可以前往 NPM 查看。

因我们需要本地调试，所以示例代码使用了匿名登录云开发(更多的登录方式请查阅登录认证)，需在腾讯云云开发控制台打开匿名登录权限以及把本地调试域名添加进安全域名

方法二：通过包管理引入

#npm
npm install tcb-js-sdk -S
# yarn
yarn add tcb-js-sdk

紧接着在项目源码中引入模块

import tcb from 'tcb-js-sdk';

const app = tcb.init({
  env: 'your-env-id'
})

登录云开发

因我们需要本地调试，所以示例代码使用了匿名登录云开发(更多可查看登录认证以及安全规则)，需在腾讯云云开发控制台打开匿名登录权限以及把本地调试域名添加进安全域名

...

auth.anonymousAuthProvider() 
.signIn()   //AnonymousAuthProvider.signIn() 匿名登录云开发，具体可根据业务需求调整
.then(() => {
    console.log("登陆成功") //登录成功
}).catch(err => {
    console.log("登录失败",err) //登录失败
})

...

Body部分

示例用了一个input用于上传file(设置好accept)，最后写两个div分别用于上传按钮与预览图片，稍用CSS了美化一下

<body>
    <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>
</body>

JS部分

获取File

var fileinput = document.getElementById('pic'),
    preview = document.getElementById('preview');
fileinput.addEventListener('change',function(){//监听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)
    }

})

使用uploadFile API上传图片到云储存

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('上传成功')
  })
}

使用getTempFileURL API获取图片下载地址

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