如何通过Appwrite上传并访问照片？新手求助

核心流程梳理 #

1. 存储桶（Bucket）的创建 #

• 如果你已经在Appwrite控制台创建了存储桶，不需要再执行buckets.create函数。这个函数用于通过代码动态创建存储桶，控制台手动创建和代码创建二选一即可。
• 仅当需要批量或自动化创建存储桶时，才考虑使用buckets.create，调用时需传入存储桶ID、名称、权限配置等参数。

2. 照片上传与访问的正确步骤 #

上传照片

需通过Appwrite存储API将文件上传至已创建的存储桶，以下是JavaScript示例代码：

import { Client, Storage } from "appwrite";

const client = new Client()
    .setEndpoint('你的Appwrite端点')
    .setProject('你的项目ID');

const storage = new Storage(client);

// 上传文件到指定存储桶
async function uploadFile() {
    try {
        const fileInput = document.getElementById('file-input');
        const response = await storage.createFile(
            '你的存储桶ID',
            'unique()', // 自动生成唯一文件ID，也可自定义字符串
            fileInput.files[0]
        );
        console.log('上传成功:', response);
    } catch (error) {
        console.error('上传失败:', error);
    }
}

访问（预览）照片

控制台复制的get方法代码用于获取文件预览链接，这是正确的访问方式，示例代码：

// 获取文件预览链接
async function getFilePreview() {
    try {
        const previewUrl = storage.getFilePreview(
            '你的存储桶ID',
            '你的文件ID',
            500, // 可选：预览图宽度
            500, // 可选：预览图高度
            'center', // 可选：裁剪模式
            100 // 可选：质量百分比
        );
        console.log('预览链接:', previewUrl);
        // 将链接赋值给img标签展示图片
        document.getElementById('preview-img').src = previewUrl;
    } catch (error) {
        console.error('获取预览失败:', error);
    }
}

关键注意事项 #

• 确保Appwrite客户端已正确配置端点和项目ID，同时存储桶的权限设置允许当前用户执行上传/访问操作（可在控制台存储桶的「权限」标签调整）。
• 上传文件时，unique()会自动生成唯一文件ID以避免冲突；若需自定义文件ID，直接传入目标字符串即可。
• getFilePreview支持通过参数调整预览图的尺寸、裁剪方式和质量，可按需修改。

内容的提问来源于stack exchange，提问作者Mohammed Aquib Hussain