index.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <input id="file" type="file" />
  9. <button id="upload">上传</button>
  10. <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
  11. <script>
  12. const client = new OSS({
  13. // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
  14. region: "oss-cn-hangzhou",
  15. // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
  16. accessKeyId: "STS.NV7VPCCHGfMPG5xFpdNLRQ8xY",
  17. accessKeySecret: "CJ4AeVxAfu7YZcynYAuG5neeoqYpx4TZJafNp3U8NoJ6",
  18. // 从STS服务获取的安全令牌(SecurityToken)。
  19. stsToken: "CAIS9AF1q6Ft5B2yfSjIr5WCHer3rpdm0Y+7RRPJonAxQsN+vv3Tuzz2IHhMfHdoCeAet/s0lGpY5vYflqZ5Qp5eRVHFbdY155hS8AX54hJsaA/sv9I+k5SANTW5KXyShb3/AYjQSNfaZY3eCTTtnTNyxr3XbCirW0ffX7SClZ9gaKZ8PGD6F00kYu1bPQx/ssQXGGLMPPK2SH7Qj3HXEVBjt3gX6wo9y9zmm53Du0uD1QWhmr5K9tSsGPX+MZkwZqUYesyuwel7epDG1CNt8BVQ/M909vccoW+Z5oHNWwAOuEXcY7qEr8cBNgZ8YbMhC0f/YkEOchsSGoABRXbZO3Bad6G/sxHKOwwOZRHsBlPNeKHc++JKUqsjtgDZ/SO67Z5dDjmCjVQ1fHN3Qme7vpvcJioxBE+ZbfovIrBLVvnP6UpktNg4h1FYLqj6ePdbGFtKhAbXTy6sWw4ed0bX/xiTQXx7jR0njhl9IaCgvxRWzDGrwmGn5ac84HEgAA==",
  20. // 填写Bucket名称。
  21. bucket: "baishuihu",
  22. });
  23. // 从输入框获取file对象,例如<input type="file" id="file" />。
  24. let data;
  25. // 创建并填写Blob数据。
  26. //const data = new Blob(['Hello OSS']);
  27. // 创建并填写OSS Buffer内容。
  28. //const data = new OSS.Buffer(['Hello OSS']);
  29. const upload = document.getElementById("upload");
  30. async function putObject(data) {
  31. try {
  32. // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
  33. // 您可以通过自定义文件名(例如exampleobject.txt)或文件完整路径(例如exampledir/exampleobject.txt)的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
  34. // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
  35. const options = {
  36. meta: { temp: "demo" },
  37. mime: "json",
  38. headers: { "Content-Type": "text/plain" },
  39. };
  40. const result = await client.put("images/test.png", data, options);
  41. console.log(result);
  42. } catch (e) {
  43. console.log(e);
  44. }
  45. }
  46. upload.addEventListener("click", () => {
  47. const data = file.files[0];
  48. putObject(data);
  49. });
  50. </script>
  51. </body>
  52. </html>