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

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

在尝试使用 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 将图像发送到服务器。

解决方法

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

demo