Vue+Yii2在线图书馆：如何发送多文件及图书信息？当前仅返回单张图

为什么当前代码只返回一张图片？ #

sendFile()方法调用后会直接发送文件响应并终止当前HTTP请求，循环里第一次执行sendFile时，响应已经发出，后续循环代码根本不会运行，所以Postman只能拿到第一张图片。而且HTTP协议本身不支持单个响应同时返回多个文件+结构化数据，必须拆分处理。

完全可以分开发送图书信息和图片，以下是两种实用方案： #

方案一：返回图书信息（含图片URL），前端按需加载图片 #

后端先返回所有图书的结构化数据（标题、作者等），同时附带图片的可访问URL，前端渲染时直接用URL加载图片。

Yii2后端代码修改：

public function actionShow()
{
    $books = Book::find()->select(['id', 'title', 'author', 'bookPicture'])->asArray()->all();
    
    // 转换本地图片路径为前端可访问的URL
    foreach ($books as &$book) {
        $imagePath = $book['bookPicture'] ?? '';
        if (file_exists($imagePath)) {
            // 假设图片存放在web/uploads目录下，生成完整访问URL
            $book['imageUrl'] = Yii::$app->request->hostInfo . '/uploads/' . basename($imagePath);
        } else {
            $book['imageUrl'] = Yii::$app->request->hostInfo . '/uploads/default-book.jpg';
        }
        unset($book['bookPicture']); // 可选：移除本地路径，避免暴露服务器内部信息
    }
    
    return $this->asJson($books);
}

Vue前端处理：
请求该接口拿到图书列表后，直接在<img>标签绑定imageUrl即可，浏览器会自动加载每张图片：

<template>
  <div v-for="book in bookList" :key="book.id">
    <h3>{{ book.title }}</h3>
    <p>{{ book.author }}</p>
    <img :src="book.imageUrl" alt="图书封面" />
  </div>
</template>

方案二：单独写图片接口，前端按图书ID请求 #

先返回图书基础信息，再通过单独的接口获取单张图片。

1. Yii2新增获取单张图片的接口：

public function actionGetImage($bookId)
{
    $book = Book::findOne($bookId);
    if (!$book) {
        throw new \yii\web\NotFoundHttpException('图书不存在');
    }
    
    $imagePath = $book->bookPicture ?? '';
    if (!file_exists($imagePath)) {
        $imagePath = static::DEFAULT_PICTURE_PATH;
    }
    
    return Yii::$app->response->sendFile($imagePath);
}

2. 前端先请求actionShow拿到图书列表（含ID），再通过ID请求图片：

<template>
  <div v-for="book in bookList" :key="book.id">
    <h3>{{ book.title }}</h3>
    <p>{{ book.author }}</p>
    <img :src="`/book/get-image?bookId=${book.id}`" alt="图书封面" />
  </div>
</template>

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