零成本！无需服务器，搭建你的图床！

先给大家看看成品：

访问地址：http://cp64mba5g6h48vl4is50.app.memfiredb.cn/

这是我花十分钟做出来的零成本，不需要服务器的图床，不需要登录，任何人都可以在上面上传图片和拿到图片链接去使用，当然这只是一个简单的图床功能，后续我会慢慢优化更强大。接下来我将教大家如何做一个零成本，无需服务器的免费图床。

1.创建免费应用

先去前往MemFire Cloud登录后，在首页创建一个免费的应用

这个应用创建完成后，你将拥有

免费云数据库
自动生成api
对象存储
二十几种第三方认证服务
实时数据库
静态托管

然后我们这个图床主要用到的是自动生成api和对象存储

2.创建存储桶

应用创建完成后，我们先去存储的界面创建一个存储桶用来存放图片

3.初始化vue项目

大家可以用npx或者vue创建都可以，我是用vue创建的

vue create vue-tuchuang

创建完成后，在根目录下创建一个.env.local，来存放环境变量

4.安装依赖包

安装用于访问应用资源的依赖包

npm i @supabase/supabase-js

5.配置环境变量

在MemFire Cloud应用控制台的“应用设置”->“API”找到应用的URL和anon 公钥，分别填到.env.local里面

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

6.初始化客户端

在src下面创建一个supabase.js，将下面的代码填入

import { createClient } from '@supabase/supabase-js'const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEYexport const supabase = createClient(supabaseUrl, supabaseAnonKey)

7.编写页面

src\App.vue

<template><div id="app"><header><h1>图床</h1><input type="file" @change="handleFileUpload" accept="image/*" /></header><main><section v-if="fileList.length > 0"><h2>已上传的图片</h2><ul class="image-list"><li v-for="(image, index) in fileList" :key="index" class="image-item"><img :src="image.publicUrl" alt="uploaded image" @click="showImage(index)" /><div class="image-overlay"><span class="image-name">{{ truncateFileName(image.name) }}</span><button @click="copyImageUrl(index)">复制URL</button></div></li></ul></section><section v-else><p style="color: black;">暂无上传的图片</p></section></main><!-- 放大查看图片的弹窗 --><div v-if="showModal" class="modal" @click="closeModal"><div class="modal-content"><img :src="selectedImageUrl" alt="enlarged image" /></div></div></div>
</template><script>
import { ref, onMounted } from 'vue';
import { supabase } from './supabase';export default {setup() {const fileList = ref([]);const files = ref();const showModal = ref(false);const selectedImageUrl = ref('');onMounted(() => {getImageUrl();});const handleFileUpload = async (evt) => {files.value = evt.target.files;try {if (!files.value || files.value.length === 0) {throw new Error('请选择要上传的图片.');}const file = files.value[0];const fileExt = file.name.split('.').pop();const filePath = `${Math.random()}.${fileExt}`;let { error: uploadError } = await supabase.storage.from('drawingBoard').upload(filePath, file);if (uploadError) throw uploadError;getImageUrl();} catch (error) {alert(error.message);}};const copyImageUrl = (index) => {const publicUrl = fileList.value[index].publicUrl;navigator.clipboard.writeText(publicUrl).then(() => {alert(`已复制图片URL：${publicUrl}`);}).catch((err) => {console.error('复制失败：', err);});};const getImageUrl = async () => {const { data, error } = await supabase.storage.from('drawingBoard').list()const filteredData = data.filter(item => item.name !== ".emptyFolderPlaceholder");filteredData.forEach((item) => {const { data } = supabase.storage.from('drawingBoard').getPublicUrl(item.name)if (data) {item.publicUrl = data.publicUrl}})if(filteredData.length >0){fileList.value = filteredData}}const showImage = (index) => {selectedImageUrl.value = fileList.value[index].publicUrl;showModal.value = true;};const closeModal = () => {showModal.value = false;};const truncateFileName = (fileName) => {const maxLength = 20; // 设置名称最大长度if (fileName.length > maxLength) {return fileName.substring(0, maxLength - 3) + '...'; // 超过长度则省略}return fileName;};return {fileList,handleFileUpload,copyImageUrl,showImage,showModal,selectedImageUrl,closeModal,truncateFileName};},
};
</script><style>
#app {font-family: Arial, sans-serif;margin: 0 auto;max-width: 800px;padding: 20px;
}header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;
}
h2{color: #000;
}
header h1{font-size: 24px;margin: 0;
}input[type='file'] {display: inline-block;padding: 10px;
}main {background-color: #f5f5f5;padding: 20px;
}
ul.image-list li img:hover {transform: scale(1.1); /* Enlarge on hover */
}
ul.image-list {list-style: none;padding: 0;display: flex;flex-wrap: wrap;gap: 20px;
}.image-item {width: calc(33.33% - 20px);text-align: center;margin-bottom: 20px;position: relative;
}.image-item img {/* max-width: 100%;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);cursor: pointer; */max-width: 100%;height: auto; /* Maintain aspect ratio */border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);cursor: pointer; /* Show pointer on hover for clicking */transition: transform 0.2s ease; /* Add smooth transition for scaling */
}.image-overlay {position: absolute;bottom: 10px;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);padding: 5px;border-radius: 5px;
}.image-overlay .image-name {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #000; /* 设置名称颜色为黑色 */
}button {padding: 5px 10px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 3px;cursor: pointer;
}/* 弹窗样式 */
.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);display: flex;justify-content: center;align-items: center;z-index: 999;
}.modal-content {max-width: 80%;max-height: 80%;overflow: auto;
}.modal-content img {max-width: 100%;max-height: 100%;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>