Nuxt中用Filepond上传的图片在哪里？

Question

我正在尝试在 nuxt 中使用 vue-filepond 上传图像，我在我的联系人中设置了这样的 filepond-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"
/>

在方法中：

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

Filepond 说上传完成但我在 Nuxt 文件夹中创建的上传文件夹中没有图像...我需要将 Filepond 与 Axios 结合使用吗？如果有人知道我可以做到这一点的最佳方式？

Answer 1

您不能将其上传到本地，也就是 http://localhost/upload，因为没有服务器在此端点等待上传。您需要为此提供一项服务，而不能只上传这样的文件（据我所知）。即使它以某种方式起作用，您也无法在生产环境中使用它，因为人们在访问您的网站时不会有 localhost。

查看 Vue framework 文档页面，您需要传递一个 server 道具。然后，由于 this.$refs.pond.getFiles().

，您几乎可以根据需要配置它，或者当您拥有文件时自己 post 自己配置它

API Server documentation给出了一些配置示例：

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/'
  }
})

它不是直接的 Vue，但你几乎可以通过使用 server 属性以相同的方式将它一对一映射。

抱歉，如果我不能提供更多帮助，但这完全取决于您计划如何进行以及您计划将其上传到哪里（如果它是 AWS S3 或其他）。
您可以查看来为您的 server 道具获得一些灵感。

Nuxt中用Filepond上传的图片在哪里？

Where is the images uploaded with Filepond in Nuxt?

upload

vue.js

axios

nuxt.js

filepond