簡體   English   中英

SvelteKit 並通過 node-postgres 從 PostgreSQL 檢索圖像

[英]SvelteKit and retrieving images from PostgreSQL via node-postgres

在 PostgreSQL 的表中存儲約 100 個 JPEG(每個 24K-100K)作為bytea列。 <img/>標簽的 src 屬性引用了 SvelteKit 端點:

<img src="/api/file/18.json" alt="Person"/>

收到此錯誤:

來自路由 /api/file/76.json 的無效響應:Uint8Array 主體必須伴隨內容類型:application/octet-stream header

export async function get({ params }) {
  const { id } = params
  const sql = `SELECT _id, name, type, data FROM files WHERE _id = $1;`
  const { rows } = await db.query(sql, [id])
  const file = rows[0]
  return {
    headers: {
      'Content-disposition': `attachment; filename=${file.name}`,
      'Content-type': file.type
    },
    body: file.data
  }
}

由於SvelteKit 端點不與 req/res 對象交互,因為它們僅在某些平台上可用,我不能只將 bytea 值寫為 stream 以響應 object 但我不確定正確的方法是什么.

也試過這個 SQL 聲明......

SELECT _id, name, type, encode(data, 'base64') as data FROM files WHERE _id = $1;

但這沒有幫助。

有什么想法嗎?

更新:問題可能與 SvelteKit 錯誤有關 - 請參閱https://github.com/sveltejs/kit/issues/1438

SvelteKit 中的限制已於 6 月 11 日解決。 我還需要將 file.data 放入一個新的 Uint8Array ...

// routes/api/file/[filenum].ts

import type { RequestHandler } from '@sveltejs/kit'
import { query } from '../_db'

export const get: RequestHandler = async ({ params }) => {
  const { filenum } = params
  const { rows } = await query(`SELECT * FROM find_file($1);`, [filenum])
  if (rows) {
    const file = rows[0]
    return {
      headers: {
        'Content-Disposition': `attachment; filename="${file.name}"`,
        'Content-Type': file.type
      },
      body: new Uint8Array(file.data)
    }
  } else return {
    status: 404
  }
}

這是 PostgreSQL 中 find_file() function 的來源:

CREATE OR REPLACE FUNCTION public.find_file(
    integer,
    OUT _id integer,
    OUT name character varying,
    OUT type character varying,
    OUT data bytea)
    RETURNS record
    LANGUAGE 'sql'
    COST 100
    VOLATILE PARALLEL UNSAFE
AS $BODY$
SELECT _id, name, type, data FROM files WHERE _id = $1 LIMIT 1
$BODY$;

和查詢()function ...

import pg from 'pg'

const pgNativePool = new pg.native.Pool({
  max: 10, // default
  connectionString: <string> import.meta.env.VITE_DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
})

type QueryResponse = (sql: string, params?: Array<any>) => Promise<pg.QueryResult<any>>
export const query: QueryResponse = (sql: string, params?: Array<any>) => pgNativePool.query(sql, params)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM