时间戳

首页 > 解决方案 > 在 Nuxt 中使用 Filepond 上传的图像在哪里？

vue.js - 在 Nuxt 中使用 Filepond 上传的图像在哪里？

问题描述

我试图在 nuxt 中使用 vue-filepond 上传图像，我在我的 contact-form.vue 中设置了 filepond，如下所示：

<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 耦合吗？如果有人知道我能做到这一点的最好方法吗？

标签： vue.jsaxiosuploadnuxt.jsfilepond

解决方案

您不能在本地上传它http://localhost/upload，因为没有服务器在此端点等待上传。您需要为此提供服务，并且不能只上传这样的文件（据我所知）。即使它以某种方式工作，你也不能让它在生产中工作，因为人们在访问你的网站时不会有本地主机。

查看Vue 框架文档页面，需要传递一个serverprop。然后，您几乎可以根据需要对其进行配置，或者在您自己拥有文件时自行发布，这要归功于this.$refs.pond.getFiles().

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

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，但您几乎可以使用serverprop 以相同的方式一对一映射它。

抱歉，如果我不能提供更多帮助，但这完全取决于您打算如何做以及您打算上传到哪里（如果是 AWS S3 或其他）。
您可以检查此配置以获得server道具的一些灵感。

推荐阅读