接口概述
本接口用于将图片上传至百度图床,支持 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_encode
为 37d3d539b6003af38418b145732ac65c1038b671
,上传文件为 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>