将自定义图像上传到 Spotify 播放列表答案

【问题标题】：Upload a custom image to Spotify playlist将自定义图像上传到 Spotify 播放列表
【发布时间】：2020-06-15 10:26:58
【问题描述】：

我正在尝试将自定义图像上传到我在 Spotify 上的播放列表。下面是发生的情况：我向 API 发出请求以使用 AJAX 创建播放列表（这可行），然后我想也使用 AJAX 将自定义图像上传到新制作的播放列表。我一直在关注Spotify's guide 如何做到这一点，并相信标题、范围、内容类型等......都是正确的。上传图片的代码如下：

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

如Spotify documentation 中所述，这是必需的。

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

【问题讨论】：

标签： javascript ajax api spotify

【解决方案1】：

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

没有换行符或空格
在字符串的开头没有像 data:image/jpeg 这样的东西（参见 this answer）

虽然与 OP 无关，但我的主要问题是我的编辑器 (VScode) 在保存编码图像时在文本文件的末尾添加了一个新行，这导致它被拒绝Spotify API。

对于其他看到这个的人，我从一个非常基本的 base64 编码图像（见下文）开始，然后构建我需要的功能。

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

（一个红点，取自this question。）

【讨论】：