返回
几行代码,图片直达Github,省时省力更省心
前端
2023-08-04 17:53:11
利用 Github 打造免费无痛的图片上传接口
在软件开发中,上传图片是一项常见的需求。传统做法是搭建一个专门的服务端接口来处理图片上传,但这个过程既繁琐又消耗资源。
幸运的是,我们可以利用 GitHub 的强大功能,轻松实现图片上传接口,无需编写复杂的后端代码。
步骤详解:用几行代码打造图片上传接口
- 创建 GitHub 仓库: 创建一个名为 "image-upload" 的新仓库。
- 上传图片: 将要上传的图片拖拽至仓库中。
- 创建 "upload.js" 文件: 在仓库根目录下创建 "upload.js" 文件,并添加以下代码:
const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
destination: './uploads/',
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
});
const upload = multer({ storage });
const app = require('express')();
app.use(require('express').json());
app.post('/upload', upload.single('image'), (req, res) => {
const file = req.file;
if (!file) {
res.status(400).json({ message: 'No file uploaded.' });
} else {
res.status(200).json({ message: 'File uploaded successfully.', url: `https://raw.githubusercontent.com/你的用户名/image-upload/master/${file.filename}` });
}
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
- 创建 "index.js" 文件: 在仓库根目录下创建 "index.js" 文件,并添加以下代码:
require('./upload.js');
-
启动服务器: 在命令行中执行
node index.js
命令。 -
访问上传接口: 在浏览器中访问
http://localhost:3000/upload
。 -
上传图片: 选择要上传的图片,点击 "上传" 按钮。
-
获取图片 URL: 上传成功后,你会收到一个 JSON 响应,其中包含图片的 URL。
GitHub 作为免费在线图床的优势
- 免费: GitHub 提供无限的免费存储空间,你可以尽情存放你的图片。
- 可靠: GitHub 是一个高度可靠的平台,你的图片会安全地存储在云端。
- 快速: GitHub 的服务器非常高效,保证了图片的快速上传和下载。
- 便捷: GitHub 提供了一个易于使用的 API,让图片上传变得轻而易举。
常见问题解答
1. 我可以在 GitHub 上存储多少张图片?
答:GitHub 提供无限的免费存储空间,你可以存储任意数量的图片。
2. GitHub 上的图片是否安全?
答:是的,GitHub 采取了严格的安全措施来保护你的图片,包括 SSL 加密和多因素身份验证。
3. 如何在代码中获取上传图片的 URL?
答:在 "upload.js" 文件中的以下代码中获取图片 URL:
url: `https://raw.githubusercontent.com/你的用户名/image-upload/master/${file.filename}`
4. 我可以用 GitHub 存储任何类型的文件吗?
答:是的,GitHub 可以存储任何类型的文件,包括文档、视频、音乐和代码。
5. GitHub 上的图片会自动删除吗?
答:只要你的仓库存在,GitHub 上的图片就会一直保留。如果你删除了仓库,图片也会被删除。