index.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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.NTjiL7GCggF7GGM97qwjwsZ2Y",
  17. accessKeySecret: "ENhsDLBXnUfwLZ5ZQmRR4gbBWSsFgvVRyjW6ECTuRhxY",
  18. // 从STS服务获取的安全令牌(SecurityToken)。
  19. stsToken: "CAIS2gJ1q6Ft5B2yfSjIr5ffIvaDqpxG0ITcRWH83Tcke+VbnJ+Zuzz2IHhMdHlpBOEdvvkylWxX6PcZlo1yTZFEXkzsNJcssM8Lr1LwO9Gd45zkvPoDjpShGHmODVjw28qKtBITznSHKJmXcFnhunJZ49mTLEePPTGMNZmOluQUDLA+VRW5ajxrHcpfIhAYxuYRKXrWM4TGUHeo+B2yanBloQ1hk2hyxL2iy8mHkHrkgUb91/UeqvaaQPHmTbE1YMshCIvrjb0uLfaZgH8B0XUQqvcq1p4j0Czco9SQD2NW5xi7KOfO+rVtVlQhPvhqQvMV96ihyKwk5bKCzJ6V0R9IOvpOTynEWJBrPnAY7mUJXDxQV8EYWxylurjnXvF+AxQk0JGAGin+2svzW55hiCFd2/zgUNuD0nrkDEmNJQZ7fl8Yn7TbYZsG0xToQ3rLd9GztUC8UrzGTq12X3Z+GoABX4zkLEs/23s68QeAkNirAUqU96Bry/bsmPGe4Nh8NqgmJLtMJbUAxx/0e2vgRsKSh/+G6yeCAH10azlC2QEC41hj5cr8kQe+9Sw1WRCT2DIeDGs7p8BmZ/SifFhduZrV6ruRz1pD3IfelOxoSA+1AS0RXog2qCa1bEC03BPNU9wgAA==", // 填写Bucket名称。
  20. bucket: "lymat",
  21. });
  22. // 从输入框获取file对象,例如<input type="file" id="file" />。
  23. let data;
  24. // 创建并填写Blob数据。
  25. //const data = new Blob(['Hello OSS']);
  26. // 创建并填写OSS Buffer内容。
  27. //const data = new OSS.Buffer(['Hello OSS']);
  28. const upload = document.getElementById("upload");
  29. async function putObject(data) {
  30. try {
  31. // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
  32. // 您可以通过自定义文件名(例如exampleobject.txt)或文件完整路径(例如exampledir/exampleobject.txt)的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
  33. // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
  34. const options = {
  35. meta: { temp: "demo" },
  36. mime: "json",
  37. headers: { "Content-Type": "text/plain" },
  38. };
  39. const result = await client.put("images/test.png", data, options);
  40. console.log(result);
  41. } catch (e) {
  42. console.log(e);
  43. }
  44. }
  45. upload.addEventListener("click", () => {
  46. const data = file.files[0];
  47. putObject(data);
  48. });
  49. </script>
  50. </body>
  51. </html>