程序员使用后端云搭建自己的共享免费图床

图床（Image Hosting）是用于存储和分享图片的服务。使用图床可以帮助你在网站、博客、论坛等地方方便地插入图片，而不需要将图片直接上传到目标服务器。以下是使用图床的基本步骤：

1. 选择图床服务

首先，你需要选择一个图床服务。常见的图床服务包括：

七牛云: 提供图片存储和CDN加速服务，适合需要大流量和高可用性的用户。
腾讯云COS: 腾讯云的对象存储服务，支持图片存储和分发。
GitHub: 如果你有GitHub账号，可以将图片上传到GitHub仓库，并通过Raw链接分享。

2. 注册账号

大多数图床服务需要你注册一个账号。注册过程通常很简单，只需提供邮箱或手机号即可。

3. 上传图片

登录到图床服务后，你可以通过以下方式上传图片：

网页上传: 在图床服务的网页上找到上传按钮，选择你要上传的图片文件。
API上传: 如果你是开发者，可以使用图床提供的API接口，通过代码上传图片。
客户端上传: 有些图床服务提供桌面或移动客户端，你可以通过客户端上传图片。

4. 获取图片链接

图片上传成功后，图床服务会生成一个图片链接。你可以复制这个链接，用于在其他地方插入图片。

5. 插入图片

在需要插入图片的地方（如博客、论坛、Markdown文档等），使用以下格式插入图片：

markdown

复制

![图片描述](图片链接)

例如：

markdown

复制

![示例图片](https://i.imgur.com/example.jpg)

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/ 有什么问题可以简书平台留言