Javascript 将自定义图像上载到Spotify播放列表

我正在尝试将自定义图像上载到Spotify上的播放列表中。发生的情况如下：我请求API使用AJAX创建一个播放列表（这是可行的），然后我还想使用AJAX将自定义图像上传到新创建的播放列表中。我一直在关注如何做到这一点，并且相信头、作用域、内容类型等。。。都是对的。以下是上载图像的代码：

var playlistId = "newly_created_playlist_id_here";
var token = "access_token_here";

var url = c.toDataURL({   // encodes canvas image (declared as "c" in another file) to base64 jpeg format
        format: 'jpeg',   // file where "url" is declared is imported via the import / export method
        quality: 0.8      // canvas is successfully encoded to jpeg base64
});

$.ajax({
    url: "https://api.spotify.com/v1/playlists/" + playlistId +"/images",
    type: 'PUT',
    body: url,
    headers: {
        "Authorization": "Bearer " + token,
        "Content-Type": "image/jpeg; charset=utf-8"
     },
     contentType: "image/jpeg",
     error: function(err) { 
         console.log('Error: ' + err); 
     },
     success: function(data) {
         alert('Load was performed.');
     }
});

但是，我从Spotify收到一个错误400，如下所示：

PUT https://api.spotify.com/v1/playlists/my_playlist_id/images 
400

以下是HTTP头文件的内容：

Request URL: https://api.spotify.com/v1/playlists/my_playlist_id/images
Request Method: PUT
Status Code: 400 
Remote Address: 35.186.224.25:443
Referrer Policy: no-referrer-when-downgrade
access-control-allow-credentials: true
access-control-allow-headers: Accept, App-Platform, Authorization, Content-Type, Origin, Retry-After, Spotify-App-Version, X-Cloud-Trace-Context
access-control-allow-methods: GET, POST, OPTIONS, PUT, DELETE, PATCH
access-control-allow-origin: *
access-control-max-age: 604800
alt-svc: clear
cache-control: private, max-age=0
content-encoding: gzip
content-length: 86
content-type: application/json
date: Mon, 15 Jun 2020 09:53:52 GMT
server: envoy
status: 400
strict-transport-security: max-age=31536000
via: HTTP/2 edgeproxy, 1.1 google
x-content-type-options: nosniff
x-robots-tag: noindex, nofollow
:authority: api.spotify.com
:method: PUT
:path: /v1/playlists/my_playlist_id/images
:scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
authorization: Bearer my_access_token
content-length: 0
content-type: image/jpeg
origin: http://127.0.0.1:5500
referer: http://127.0.0.1:5500/index.html
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

为了澄清我之前所说的内容，我再次重申，创建的播放列表没有错误，图像也成功地编码为base64 jpeg。但是，当我尝试将图像上载到新的播放列表时，我收到错误400。新的访问令牌也成功生成

请求用户访问时，我使用以下作用域：

ugc-image-upload
playlist-modify-public
playlist-modify-private

如中所述所需

---

我不知道我在这里做错了什么，我也没有在互联网上找到任何其他问题来回答我的问题，所以非常感谢您的帮助

这引起了我类似的头痛-它确实有效，但图像的编码必须精确：

• 没有换行符或空格
• 字符串开头没有类似于

  data:image/jpeg

  的内容（请参阅）

虽然与OP无关，但在我的例子中，主要问题是我的编辑器（VScode）在保存编码图像时在文本文件的末尾添加了一行新行，这导致Spotify API拒绝了该行

对于其他人来说，我从一个非常基本的base64编码图像（见下文）开始，然后逐步建立起我所需要的功能，从而实现了这一点

ivborw0kgoaaaansuhueugaaaaaaaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

---

（一个红点，取自。）

这让我感到类似的头痛-它确实有效，但图像的编码必须精确：

• 没有换行符或空格
• 字符串开头没有类似于

  data:image/jpeg

  的内容（请参阅）

虽然与OP无关，但在我的例子中，主要问题是我的编辑器（VScode）在保存编码图像时在文本文件的末尾添加了一行新行，这导致Spotify API拒绝了该行

对于其他人来说，我从一个非常基本的base64编码图像（见下文）开始，然后逐步建立起我所需要的功能，从而实现了这一点

ivborw0kgoaaaansuhueugaaaaaaaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

（一个红点，取自）