百度图床上传接口说明文档

接口概述

本接口用于将图片上传至百度图床,支持 JPEG、PNG 和 GIF 格式。

上传后,用户可以获取上传图片的链接,方便在其他地方引用或分享。

上传接口 URL

POST https://sp0.baidu.com/6_R1fD_bAAd3otqbppnN2DJv/Pic/upload?pid=super&app=skin&l&logid={logid}

参数说明

  • logid: 随机生成的10位数字,用于标识请求。格式:XXXXXXXXXX(10位数字)。

请求头

  • Content-Type: multipart/form-data (自动设置)

请求体

使用 FormData 对象封装待上传的文件。上传时,必须包含以下字段:

  • file: 需要上传的文件,支持的格式包括:
  • jpg
  • jpeg
  • png
  • gif

返回格式

成功上传后,返回的 JSON 数据格式如下:

{
  "err_no": 0,
  "err_msg": "",
  "data": {
    "cur_time": null,
    "pic_id": "301005840318",
    "fullpic_width": 863,
    "fullpic_height": 863,
    "pic_type": 1,
    "full_datalen": 193097,
    "full_sign0": null,
    "full_sign1": null,
    "pic_id_encode": "37d3d539b6003af38418b145732ac65c1038b671",
    "pic_desc": "wolf",
    "pic_water": "http://imgsrc.baidu.com/super/pic/item/37d3d539b6003af38418b145732ac65c1038b671.jpg"
  }
}

返回字段说明

  • err_no: 错误码,0表示成功。
  • err_msg: 错误信息(如果有)。
  • data: 包含上传图片的相关信息。
  • pic_id: 图片ID。
  • fullpic_width: 图片宽度。
  • fullpic_height: 图片高度。
  • pic_type: 图片类型(1表示正常上传)。
  • full_datalen: 图片数据长度。
  • pic_id_encode: 编码后的图片ID,用于生成图片链接。
  • pic_desc: 图片描述。
  • pic_water: 带水印的图片链接。

图片链接生成

上传成功后,使用 pic_id_encode 和上传文件的扩展名生成图片的访问链接:

https://imgsrc.baidu.com/forum/pic/item/{pic_id_encode}.{file_extension}

示例链接

假设返回的 pic_id_encode37d3d539b6003af38418b145732ac65c1038b671,上传文件为 PNG 格式,生成的链接为:

https://imgsrc.baidu.com/forum/pic/item/37d3d539b6003af38418b145732ac65c1038b671.png

错误处理

如果上传失败,检查以下几个方面:

  • 文件是否符合支持的格式。
  • 网络连接是否正常。
  • 服务器是否返回了有效的错误信息。

注意事项

  • 由于接口的特性,上传速度可能会受到网络状况的影响。
  • 确保在使用过程中遵循相关的用户协议和版权规定。

使用代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度图床上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #e0eafc, #cfdef3);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        .container {
            max-width: 500px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 20px;
        }
        input[type="file"] {
            margin-bottom: 20px;
            padding: 10px;
            border: 2px dashed #5cb85c;
            border-radius: 5px;
            transition: border-color 0.3s;
            width: 100%;
            outline: none;
        }
        input[type="file"]:focus {
            border-color: #4cae4c;
        }
        button {
            padding: 10px 20px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.3s;
        }
        button:hover {
            background-color: #4cae4c;
            transform: scale(1.05);
        }
        #result {
            margin-top: 20px;
            text-align: left;
        }
        a {
            color: #337ab7;
            text-decoration: none;
            word-wrap: break-word;
        }
        a:hover {
            text-decoration: underline;
        }
        img {
            max-width: 100%;
            border-radius: 5px;
            margin-top: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .message {
            font-size: 16px;
            margin: 10px 0;
            color: #333;
        }
        .copyright {
            margin-top: 20px;
            font-size: 14px;
            color: #555;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>上传图片到百度图床</h1>
        <input type="file" id="fileInput" accept="image/*">
        <button id="uploadBtn">上传</button>
        <div id="result"></div>
        <div class="copyright">© 2024 前路寻. 版权所有</div>
    </div>

    <script>
        // 随机生成10位数字的函数
        function generateRandomLogid() {
            return Math.floor(1000000000 + Math.random() * 9000000000); // 生成一个10位数
        }

        document.getElementById('uploadBtn').addEventListener('click', function() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];

            if (!file) {
                alert('请先选择一个文件');
                return;
            }

            const fileExtension = file.name.split('.').pop().toLowerCase(); // 获取文件后缀
            const validExtensions = ['jpg', 'jpeg', 'png', 'gif']; // 支持的格式

            if (!validExtensions.includes(fileExtension)) {
                alert('请上传 JPG、PNG 或 GIF 格式的图片');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            const logid = generateRandomLogid(); // 生成随机logid
            const uploadUrl = `https://sp0.baidu.com/6_R1fD_bAAd3otqbppnN2DJv/Pic/upload?pid=super&app=skin&l&logid=${logid}`; // 拼接上传URL

            fetch(uploadUrl, {
                method: 'POST',
                body: formData,
                credentials: 'include', // 确保携带 cookies
            })
            .then(response => response.json())
            .then(data => {
                if (data.err_no === 0) {
                    const picIdEncode = data.data.pic_id_encode;
                    const imageUrl = `https://imgsrc.baidu.com/forum/pic/item/${picIdEncode}.${fileExtension}`; // 使用上传的文件后缀
                    document.getElementById('result').innerHTML = `
                        <div class="message">上传成功!图片链接:</div>
                        <a href="${imageUrl}" target="_blank">${imageUrl}</a>
                        <br>
                        <img src="${imageUrl}" alt="Uploaded Image">
                    `;
                } else {
                    alert('上传失败: ' + data.err_msg);
                }
            })
            .catch(error => {
                console.error('上传时出错:', error);
                alert('上传时发生错误,请重试');
            });
        });
    </script>
</body>
</html>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注