如何通过 axios 使用 Vue filepond 发送图像？

Question

在尝试使用 vue-filepond 上传图片时，我发现过程很混乱。 files 道具在我上传图片后没有保存文件。

这是一些代码：

<file-pond
    name="logo"
    allow-multiple="false"
    max-files="1"
    accepted-file-types="image/jpeg, image/png"
    v-bind:files="images"
    :label-idle="label"
    v-on:processfile="onload"
    :server="server"
  />

<script>
export default{
  data() {
    return {
      images: [],
      server: {
        process: () => {
          console.log(this.myFiles);
        },
      },
    };
  },
}
</script>

上传图片后，我发现 images 数组为空。我需要通过 axios.

将图像发送到服务器

Answer 1

files 道具用于预加载文件。它不会更新您实际放到组件上的文件。

要查看处理（上传）了哪些文件，请收听 processfile 事件。要查看添加了哪些文件（但尚未处理），请收听 addfile 事件：

<template>
  <file-pond @processfile="onProcessFile" @addfile="onAddFile" />
</template>

<script>
export default {
  methods: {
    onProcessFile(error, file) {
      console.log('file processed', { error, file })
    },
    onAddFile(error, file) {
      console.log('file added', { error, file })
    }
  }
}
</script>

demo

如何通过 axios 使用 Vue filepond 发送图像？

How to send images with Vue filepond via axios?

file-upload

vue.js

vuejs2

filepond