cloud.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>云盘上传</title>
  7. </head>
  8. <body>
  9. <div>
  10. <a href="/qrlogin-nocookie.html">
  11. 如果没登录,请先登录
  12. </a>
  13. </div>
  14. <input id="file" type="file" multiple />
  15. <div id="app">
  16. <ul>
  17. <li v-for="(item,index) in songs" :key="index">
  18. {{item.songName}}
  19. </li>
  20. </ul>
  21. </div>
  22. <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
  23. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  24. <script>
  25. const app = Vue.createApp({
  26. data() {
  27. return {
  28. songs: []
  29. }
  30. },
  31. created() {
  32. this.getData()
  33. },
  34. methods: {
  35. getData() {
  36. console.log('getdata');
  37. const _this = this
  38. axios({
  39. url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
  40. }).then(res => {
  41. console.log(res.data)
  42. _this.songs = res.data.data
  43. })
  44. }
  45. }
  46. }).mount('#app')
  47. const fileUpdateTime = {}
  48. let fileLength = 0
  49. function main() {
  50. document
  51. .querySelector('input[type="file"]')
  52. .addEventListener('change', function (e) {
  53. console.log(this.files)
  54. let currentIndx = 0
  55. fileLength = this.files.length
  56. for (const item of this.files) {
  57. currentIndx += 1
  58. upload(item, currentIndx)
  59. }
  60. })
  61. }
  62. main()
  63. function upload(file, currentIndx) {
  64. var formData = new FormData()
  65. formData.append('songFile', file)
  66. axios({
  67. method: 'post',
  68. url: `/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
  69. headers: {
  70. 'Content-Type': 'multipart/form-data',
  71. },
  72. data: formData,
  73. }).then(res => {
  74. console.log(`${file.name} 上传成功`)
  75. if (currentIndx >= fileLength) { console.log('上传完毕') }
  76. app.getData()
  77. }).catch(async err => {
  78. console.log(err)
  79. console.log(fileUpdateTime)
  80. fileUpdateTime[file.name] ? fileUpdateTime[file.name] += 1 : fileUpdateTime[file.name] = 1
  81. if (fileUpdateTime[file.name] >= 4) {
  82. console.error(`丢,这首歌怎么都传不上:${file.name}`)
  83. return
  84. } else {
  85. console.error(`${file.name} 失败 ${fileUpdateTime[file.name]} 次`)
  86. }
  87. // await login()
  88. upload(file, currentIndx)
  89. })
  90. }
  91. </script>
  92. </body>
  93. </html>