首页  >  问答  >  正文

Filepond 在渲染图像之前添加身份验证标头

我在我的 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 错误

P粉201448898P粉201448898205 天前398

全部回复(1)我来回复

  • P粉378264633

    P粉3782646332024-03-28 00:25:14

    这就是您正在寻找的东西。 为了呈现远程图像 url,您需要为其提供额外的图像属性,在本例中为 local

    详细阅读此处 - https://pqina.nl/filepond /docs/api/instance/properties/#files

    回复
    0
  • 取消回复