index.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>COS-SDK-Vue-demo</title>
  8. <script src="./vue.min.js"></script>
  9. <!-- 使用时替换为当前最新版sdk -->
  10. <script src="../../dist/cos-js-sdk-v5.js"></script>
  11. <script src="index.js"></script>
  12. <style>
  13. table {width: 100%; border: solid 1px #ddd;}
  14. table td {padding: 0 10px;}
  15. .more-btn {display: block; margin: 10px auto 0;}
  16. </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20. <div class="nav">
  21. <span v-for="(item, index) in navList" :key="index" style="margin-right: 5px;">
  22. <a href="javascript:void(0)" @click="navClick(item)">{{item.name}}</a>
  23. <span v-if="index !== navList.length - 1">/</span>
  24. </span>
  25. </div>
  26. <div style="margin: 10px 0;">
  27. <button @click="uploadFileClick" style="margin: 0 10px 0 0;">上传文件</button>
  28. <button @click="uploadFolderClick">上传文件夹</button>
  29. <input type="file" style="display: none;" @change="uploadChange" class="file-select">
  30. <input type="file" style="display: none;" @change="uploadChange" class="folder-select" webkitdirectory multiple>
  31. </div>
  32. <div class="file-list">
  33. <table border="1" cellpadding="0" cellspacing="0">
  34. <thead>
  35. <th v-for="(item, index) in columns" :key="index">{{item.label}}</th>
  36. </thead>
  37. <tbody>
  38. <tr v-for="(item, index) in list" :key="index">
  39. <td>
  40. <a v-if="item.isDir" href="javascript:void(0)" @click="openFolder(item.Prefix)">{{item.name}}</a>
  41. <span v-else>{{item.name}}</span>
  42. </td>
  43. <td>{{item.Size || '-'}}</td>
  44. <td>{{item.LastModified || '-'}}</td>
  45. <td>
  46. <a v-if="!item.isDir" href="javascript:void(0)" @click="downloadFile(item)">下载</a>
  47. <a v-if="!item.isDir" href="javascript:void(0)" @click="deleteFile(item)">删除</a>
  48. </td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. <button v-if="hasMore === 'true'" class="more-btn" @click="loadMore">加载更多</button>
  53. </div>
  54. </div>
  55. </body>
  56. </html>