图床（Image Hosting）是用于存储和分享图片的服务。使用图床可以帮助你在网站、博客、论坛等地方方便地插入图片，而不需要将图片直接上传到目标服务器。以下是使用图床的基本步骤：
1. 选择图床服务
首先，你需要选择一个图床服务。常见的图床服务包括：
- 七牛云: 提供图片存储和CDN加速服务，适合需要大流量和高可用性的用户。
- 腾讯云COS: 腾讯云的对象存储服务，支持图片存储和分发。
- GitHub: 如果你有GitHub账号，可以将图片上传到GitHub仓库，并通过Raw链接分享。
2. 注册账号
大多数图床服务需要你注册一个账号。注册过程通常很简单，只需提供邮箱或手机号即可。
3. 上传图片
登录到图床服务后，你可以通过以下方式上传图片：
- 网页上传: 在图床服务的网页上找到上传按钮，选择你要上传的图片文件。
- API上传: 如果你是开发者，可以使用图床提供的API接口，通过代码上传图片。
- 客户端上传: 有些图床服务提供桌面或移动客户端，你可以通过客户端上传图片。
4. 获取图片链接
图片上传成功后，图床服务会生成一个图片链接。你可以复制这个链接，用于在其他地方插入图片。
5. 插入图片
在需要插入图片的地方（如博客、论坛、Markdown文档等），使用以下格式插入图片：
markdown
复制
例如：
markdown
复制
6. 管理图片
大多数图床服务允许你管理上传的图片，包括查看、删除、编辑图片信息等。你可以根据需要对图片进行管理。
存在问题
- 国内的免费图床有大小，格式限制
- 一些国内的图床提供几个月，就访问不到了
- github 图床目前国内已经访问不到了
这里使用Bmob后端云来搭建图床，首先假定你已经有了一个账号，平台每月会给到20G CDN流量。
我们通过JS SDK来搭建简单图床
1.安装SDK
~:gh repo clone bmob/hydrogen-js-sdk
~:cd hydrogen-js-sdk
~:npm install
安装
2.运行
➜ hydrogen-js-sdk git:(master) ✗ npm run dev
运行
3.替换自己的秘钥
打开项目代码，找到main.js
秘钥
4.最终效果
效果
这时候UI自己设计一下，就完成了一个简易图床
5.核心代码
html
<input type="file" id="profilePhotoFileUpload" multiple="multiple" >
JavaScript
// 获取文件上传控件元素
const fileUploadControl = document.getElementById('profilePhotoFileUpload');
// 当文件选择发生变化时触发该事件处理函数
fileUploadControl.onchange = () => {
// 获取选择的文件列表
const pic = fileUploadControl.files;
// 遍历选择的文件并创建Bmob.File对象
for(let item of pic){
// 初始化Bmob.File，命名文件并关联文件对象
file = Bmob.File(item.name, item);
}
// 保存文件到云端存储服务
file.save().then(res => {
// 保存成功后，获取保存结果
const file = res[0];
// 打印保存文件的数量和文件信息
console.log(res.length);
console.log(res,file,file.url);
// file.url 插入到id为img的层下面最后一个元素图片展示
document.getElementById('img').appendChild(document.createElement('img')).src = file.url;
// 把文件url 文本插入到上一个图片后面
document.getElementById('img').appendChild(document.createTextNode(file.url));
});
}
教程代码 github 地址：https://github.com/bmob/hydrogen-js-sdk/ 有什么问题可以简书平台留言
