playlist_cover_update.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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" name="filename" />
  15. <img id="playlist_cover" style="height: 200px; width: 200px; border-radius: 50%" />
  16. <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
  17. <script>
  18. const playlist_id = ''
  19. if (!playlist_id) {
  20. const msg = '请设置你的歌单id'
  21. alert(msg)
  22. throw new Error(msg)
  23. }
  24. main()
  25. async function main() {
  26. document.querySelector('input[type="file"]').addEventListener(
  27. 'change',
  28. function (e) {
  29. var file = this.files[0]
  30. upload(file)
  31. },
  32. false,
  33. )
  34. const res = await axios({
  35. url: `/playlist/detail?id=${playlist_id}&timestamp=${Date.now()}`,
  36. })
  37. document.querySelector('#playlist_cover').src = res.data.playlist.coverImgUrl
  38. }
  39. async function upload(file) {
  40. var formData = new FormData()
  41. formData.append('imgFile', file)
  42. const imgSize = await getImgSize(file)
  43. const res = await axios({
  44. method: 'post',
  45. url: `/playlist/cover/update?id=${playlist_id}&cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width
  46. }&imgX=0&imgY=0&timestamp=${Date.now()}`,
  47. headers: {
  48. 'Content-Type': 'multipart/form-data',
  49. },
  50. data: formData,
  51. })
  52. document.querySelector('#playlist_cover').src = res.data.data.url
  53. }
  54. function getImgSize(file) {
  55. return new Promise((resolve, reject) => {
  56. let reader = new FileReader()
  57. reader.readAsDataURL(file)
  58. reader.onload = function (theFile) {
  59. let image = new Image()
  60. image.src = theFile.target.result
  61. image.onload = function () {
  62. resolve({
  63. width: this.width,
  64. height: this.height,
  65. })
  66. }
  67. }
  68. })
  69. }
  70. </script>
  71. </body>
  72. </html>