API图库获取图片后，如何实现图片的存储与保存？

我开发了一个小型API图库，能从Unsplash API获取图片并在页面展示，但不清楚如何实现图片的存储与保存功能。以下是当前的核心JavaScript代码：

function get_image() {
let access_key = 'YmMDTJCtZaK6veBdER5WkjyqmgGBRyH6Bpdqt7WcrM4';
let url = `https://api.unsplash.com/photos/random/?client_id=YmMDTJCtZaK6veBdER5WkjyqmgGBRyH6Bpdqt7WcrM4`;

let imageElement = document.querySelector('.image');

fetch(url)
.then(function(response){
    //console.log(response.json())
    return response.json();
})

.then(function(jsonData){
    imageElement.src = jsonData.urls.regular;
})

}

//// Array
let selected_images = [];

document.querySelectorAll('.large-image').forEach(function(img, idx) {
  img.src = "" + idx;
  img.addEventListener('click', function({target: src}){
    if(!selected_images.includes(src)) {
      selected_images.push(src);
    }
    console.log(selected_images);
   });

});

一、前端本地存储方案 #

1. 用LocalStorage持久化图片信息 #

直接存储图片文件会占用大量空间，建议存储图片的元数据（URL、ID、描述等），需要时再加载：

修改获取图片的逻辑，添加存储代码：

function get_image() {
let access_key = 'YmMDTJCtZaK6veBdER5WkjyqmgGBRyH6Bpdqt7WcrM4';
let url = `https://api.unsplash.com/photos/random/?client_id=YmMDTJCtZaK6veBdER5WkjyqmgGBRyH6Bpdqt7WcrM4`;

let imageElement = document.querySelector('.image');

fetch(url)
.then(function(response){
    return response.json();
})
.then(function(jsonData){
    imageElement.src = jsonData.urls.regular;
    // 构造要存储的图片信息
    const imageInfo = {
        id: jsonData.id,
        url: jsonData.urls.regular,
        alt: jsonData.alt_description || '未命名图片'
    };
    // 读取已存储的图片列表，无则初始化空数组
    let savedImages = JSON.parse(localStorage.getItem('savedImages')) || [];
    // 避免重复存储
    if(!savedImages.some(img => img.id === imageInfo.id)){
        savedImages.push(imageInfo);
        localStorage.setItem('savedImages', JSON.stringify(savedImages));
    }
})
}

页面加载时读取并展示存储的图片：

function loadSavedImages() {
    const savedImages = JSON.parse(localStorage.getItem('savedImages')) || [];
    // 创建容器展示已存图片
    const container = document.createElement('div');
    container.id = 'saved-images';
    container.style.marginTop = '20px';
    document.body.appendChild(container);

    savedImages.forEach(imgInfo => {
        const img = document.createElement('img');
        img.src = imgInfo.url;
        img.alt = imgInfo.alt;
        img.style.width = '200px';
        img.style.marginRight = '10px';
        container.appendChild(img);
    });
}

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', loadSavedImages);

2. 实现图片本地下载功能 #

添加按钮让用户直接保存当前展示的图片到本地：

先在页面添加按钮：

<button id="save-btn">保存当前图片</button>

然后添加JS逻辑：

const saveBtn = document.getElementById('save-btn');
saveBtn.addEventListener('click', () => {
    const imageElement = document.querySelector('.image');
    if(!imageElement.src) return;

    // 创建临时a标签触发下载
    const link = document.createElement('a');
    link.href = imageElement.src;
    // 设置下载文件名
    link.download = `unsplash-${Date.now()}.jpg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

二、后端存储方案（长期托管图片） #

如果需要将图片保存到自己的服务器，可通过前端上传图片Blob到后端接口：

前端上传逻辑 #

修改获取图片后的代码，添加上传步骤：

.then(function(jsonData){
    imageElement.src = jsonData.urls.regular;
    // 获取图片Blob数据
    fetch(jsonData.urls.regular)
    .then(res => res.blob())
    .then(blob => {
        const formData = new FormData();
        formData.append('image', blob, `unsplash-${jsonData.id}.jpg`);
        // 发送到你的后端上传接口
        fetch('/api/upload-image', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            console.log('图片上传成功，存储路径：', data.filePath);
        })
        .catch(err => console.error('上传失败：', err));
    });
})

后端接收示例（Node.js + Express） #

使用multer中间件处理文件上传：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置文件存储路径和文件名
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './uploads/'); // 确保uploads文件夹存在
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    }
});

const upload = multer({ storage: storage });

// 上传接口
app.post('/api/upload-image', upload.single('image'), (req, res) => {
    res.json({
        success: true,
        filePath: `/uploads/${req.file.filename}`
    });
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

内容的提问来源于stack exchange，提问作者user20408974