html 从浏览器端向QingStor对象存储上传文件

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 从浏览器端向QingStor对象存储上传文件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
  <script src='qingstor-sdk.min.js'></script>
</head>

<body>
  <h3>Upload</h3>
  <input type="file" onchange="upload()" id="file" name="file" />
  <script>
    let Config = require('qingstor-sdk').Config
    let QingStor = require('qingstor-sdk').QingStor;
    let config = new Config('not_need', 'not_need');
    let bucket = new QingStor(config).Bucket('<bucket>', '<zone>');

    function upload() {
      let f = document.getElementById("file").files[0];
      let reader = new FileReader();
      reader.readAsBinaryString(f);
      reader.onload = (() => {
        let req = bucket.putObjectRequest(f.name, {
          "Content-Type": f.type
        });
        fetch("http://localhost:9000/operation?channel=header", {
            method: "POST",
            body: JSON.stringify(req.operation),
            headers: {
              "Content-Type": "application/json; charset=utf-8"
            }
          })
          .then(res => res.json())
          .then(res => {
            req.operation.headers.Authorization = res.authorization;
            req.operation.body = reader.result;
            req.send()
          })
      });
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <script src='qingstor-sdk.min.js'></script>
</head>

<body>
  <h3>Upload</h3>
  <input type="file" onchange="upload()" id="file" name="file" />
  <script>
    let Config = require('qingstor-sdk').Config
    let QingStor = require('qingstor-sdk').QingStor;
    let config = new Config('<access_key_id>', '<secret_access_key>');
    let bucket = new QingStor(config).Bucket('<bucket>', '<zone>');

    function upload() {
      let f = document.getElementById("file").files[0];
      let reader = new FileReader();
      reader.readAsBinaryString(f);
      reader.onload = (() => {
        bucket.putObject(f.name, {
          body: reader.result
        });
      });
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
  <h3>Upload</h3>
  <form id="upload" action="https://<bucket>.<zone>.qingstor.com" method="POST" 
        enctype="multipart/form-data">
    <span>Click or Drag a File Here to Upload</span>
    <input type=hidden name="key" value="<key>" />
    <input type=hidden name="policy" value="<policy>" />
    <input type=hidden name="access_key_id" value="<access_key_id>" />
    <input type=hidden name="signature" value="<signature>" />
    <input type=file name="file" />
    <input type=submit name="Upload" value="Upload to QingStor" />
  </form>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
  <h3>Upload</h3>
  <form id="upload" action="https://<bucket>.<zone>.qingstor.com" method="POST" 
        enctype="multipart/form-data">
    <span>Click or Drag a File Here to Upload</span>
    <input type=hidden name="key" value="<key>" />
    <input type=file name="file" />
    <input type=submit name="Upload" value="Upload to QingStor" />
  </form>
</body>

</html>

以上是关于html 从浏览器端向QingStor对象存储上传文件的主要内容，如果未能解决你的问题，请参考以下文章

QingStor 对象存储携手爱数 AnyBackup 护航海量数据安全

云原生需要什么样的存储，QingStor这么说

云原生存储 QingStor 进入 CNCF 全景图

QingStor NeonSAN跻身四强新风口下的青云QingCloud正在厚积薄发