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

vue.js-在 Nuxt 中用 Filepond 上传的图片在哪里?

(vue.js - Where is the images uploaded with Filepond in Nuxt?)

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

我尝试在 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 结合使用吗?如果有人知道我能做到这一点的最佳方式吗?

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

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

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

API服务器文档是给配置的一些例子:

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道具获得一些灵感