Filepond 在渲染圖像之前新增身份驗證標頭

Question

我在我的 Vue 應用程式中使用 filepond 外掛程式。它非常適合我的應用程式要求。 目前我的後端服務正在透過 JWT 身份驗證提供映像。 如何向文件池添加自訂標頭以載入元件中的圖像？

以下是我所取得的成就

<file-pond
    ref="file"
    name="filepond"
    :label-idle="placeholder"
    accepted-file-types="image/jpeg, image/png"
    drop-validation="true"
    style-panel-layout="compact circle"
    style-button-remove-item-position="center bottom"
    style-panel-aspect-ratio="1:1"
    :allow-image-crop="true"
    image-crop-aspect-ratio="1:1"
    :files="src"
    :server="{
      url: 'http://192.168.0.100',

      load: {
        url: './process',
        method: 'GET',
        headers: {
          'x-customheader': 'Hello World'
        },
        withCredentials: false
      }
    }"
  />

即使在安裝元件之後，伺服器選項仍然不會被調用，並且我的圖像會拋出 401 錯誤

Answer 1

這就是您正在尋找的東西。 為了呈現遠端圖像 url，您需要為其提供額外的圖像屬性，在本例中為 local。

詳細閱讀此處 - https://pqina.nl/filepond /docs/api/instance/properties/#files