Filepond ajoute un en-tête d'authentification avant le rendu de l'image

Question

J'utilise le plugin filepond dans mon application Vue. Cela correspond parfaitement aux exigences de mon application. Actuellement, mon service backend diffuse des images via l'authentification JWT. Comment ajouter un en-tête personnalisé au pool de fichiers pour charger des images dans le composant ?

Voici mes réalisations

<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
      }
    }"
  />

Même après l'installation du composant, les options du serveur ne sont toujours pas appelées et mes images génèrent des erreurs 401

Answer 1

C'est ce que vous recherchez. Afin d'afficher l'URL d'une image distante, vous devez lui fournir un attribut d'image supplémentaire, dans ce cas local.

Lire la suite ici - https://pqina.nl/filepond /docs/api/instance/properties/#files