Warm tip: This article is reproduced from serverfault.com, please click

Where is the images uploaded with Filepond in Nuxt?

发布于 2021-01-21 15:58:57

Im trying to upload an image with vue-filepond in nuxt i setup filepond like this in my contact-form.vue :

<file-pond
  name="file"
  ref="pond"
  class-name="my-pond"
  label-idle="Drop files here..."
  allow-multiple="true"
  instantUpload="true"
  chunkUploads="true"
  chunkSize= 2500
  accepted-file-types="image/jpeg, image/png"
  server="http://localhost/upload"
  v-bind:files="files"
  v-on:init="handleFilePondInit"
/>

in the method :

handleFilePondInit: function() {
  console.log('FilePond has initialized');
  // FilePond instance methods are available on `this.$refs.pond`
},

Filepond is saying upload complete but I got no image in the upload folder I created in my Nuxt folder... do I need to couple Filepond with Axios ? if someone know the best way I could do this ?

Questioner
J.O
Viewed
0
kissu 2021-01-22 00:50:46

You cannot upload it locally aka http://localhost/upload, since there is not server waiting for an upload at this endpoint. You need a service for this one and cannot just upload a file like this (to my knowledge). And even if it somehow works, you could not have it working on production since people will not have a localhost when visiting your website.

Looking on the Vue framework documentation page, you need to pass a server prop. Then, you can pretty much configure it to your need or post it yourself when you have the files themselves thanks to this.$refs.pond.getFiles().

The API Server documentation is giving some example of configuration:

FilePond.setOptions({
  server: {
    url: 'http://192.168.0.100',
    timeout: 7000,
    process: {
      url: './process',
      method: 'POST',
      headers: {
        'x-customheader': 'Hello World'
      },
      withCredentials: false,
      onload: (response) => response.key,
      onerror: (response) => response.data,
      ondata: (formData) => {
        formData.append('Hello', 'World');
        return formData;
      }
    },
    revert: './revert',
    restore: './restore/',
    load: './load/',
      fetch: './fetch/'
  }
})

It's not directly Vue but you can pretty much map it one to one in the same way by using the server prop.

Sorry if I cannot help more but it all depends on how you plan to do it and where you plan to upload it (if it's AWS S3 or something else).
You can check this configuration to get some inspiration for your server prop.