我在我的 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 錯誤
這就是您正在尋找的東西。 為了呈現遠端圖像 url,您需要為其提供額外的圖像屬性,在本例中為
local
。詳細閱讀此處 - https://pqina.nl/filepond /docs/api/instance/properties/#files