<input type="file" id="file"/>

<input type="button" value="上传" onclick="uploadFile()"/>

<span id="progress"></span>

<script src="//imgcache.qq.com/qcloud/tcbjs/1.0.0/tcb.js"></script>
<script src="/main.js"></script>
<script>
  function uploadFile(){
    let filename = `${Date.now()}.jpg`;
    tcb.uploadFile({
      cloudPath: filename,// 上传至云端的路径
      filePath: document.getElementById('file').files[0],// 网站页面临时文件路径
      onUploadProgress:function (progressEvent) {
          var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
          render(percentCompleted);
      }
    })
    .then(()=>show(filename))
    .catch(console.error);
  }
  function render(res){
    document.getElementById('progress').innerHTML = res;
    console.log(res)
  }
  function show(filename){
    render(`<img src="https://6d6f-moxigan-1259722256.tcb.qcloud.la/${filename}" />`);
  }
</script>