avatar_update.html 2.0 KB

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