后端静态文件服务配置与前端访问指南

const express = require('express');
const path = require('path'); // 用于处理文件路径

const app = express();
const PORT = 8001; // 后端服务运行的端口

// 定义上传文件的绝对路径
// 确保这个路径与你的实际文件存储路径一致
const uploadsDirectory = '/home/backend/go/uploads'; 

// 配置静态文件服务
// app.use('/uploads', express.static(uploadsDirectory));
// 这一行代码是关键：
// - 第一个参数 '/uploads' 是公共URL路径前缀。
//   这意味着所有以 '/uploads' 开头的HTTP请求，Express都会尝试处理。
// - 第二个参数 express.static(uploadsDirectory) 指示Express
//   在 uploadsDirectory 这个文件系统路径中查找请求的文件。
// 例如，如果请求是 http://localhost:8001/uploads/173ba017f27b69b42d7e747.png
// Express就会在 /home/backend/go/uploads/173ba017f27b69b42d7e747.png 查找并返回文件。
app.use('/uploads', express.static(uploadsDirectory));

// 示例：后端API返回文件信息
app.get('/api/file-info/:id', (req, res) => {
  // 假设根据ID从数据库获取文件信息
  // 注意：这里的 'file' 字段返回的是公共访问路径，而不是服务器内部文件系统路径
  const fileId = req.params.id;
  const fileName = '173ba017f27b69b42d7e747.png'; // 假设这是与ID关联的文件名

  res.json({
    id: fileId,
    name: 'file impian',
    file: `/uploads/${fileName}` // 返回可供前端访问的相对URL路径
  });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`Backend server listening on port ${PORT}`);
});

<template>
  <div>
    <h2>文件展示</h2>
    <div v-if="imageData.file">
      <p>文件名称: {{ imageData.name }}</p>
      <!-- 使用 b-img 组件显示图片 -->
      <b-img :src="getFullImageUrl(imageData.file)" fluid alt="图片"></b-img>
    </div>
    <div v-else>
      <p>暂无图片可显示。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: {
        id: null,
        name: '',
        file: '' // 从后端获取的相对路径，例如 '/uploads/173ba017f27b69b42d7e747.png'
      },
      backendBaseUrl: 'http://localhost:8001' // 你的后端服务地址，请根据实际情况修改
    };
  },
  mounted() {
    // 模拟从后端获取数据
    this.fetchImageData(2); // 假设获取ID为2的文件信息
  },
  methods: {
    // 拼接完整的图片URL
    getFullImageUrl(relativePath) {
      if (!relativePath) return '';
      // 确保相对路径以 '/' 开头，避免重复斜杠
      const normalizedPath = relativePath.startsWith('/') ? relativePath : `/${relativePath}`;
      return `${this.backendBaseUrl}${normalizedPath}`;
    },
    // 模拟调用后端API获取文件信息
    async fetchImageData(fileId) {
      try {
        const response = await fetch(`${this.backendBaseUrl}/api/file-info/${fileId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        this.imageData = data;
      } catch (error) {
        console.error("获取文件信息失败:", error);
        // 处理错误，例如设置默认图片或显示错误消息
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
b-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>