如何将FilePond的Server响应保存到Vue的data变量中？

问题核心是FilePond的process回调函数里的this不是Vue实例，直接用this.fileList自然找不到对应的变量，下面给两种简单的解决办法：

方法一：提前保存Vue实例引用 #

在配置FilePond之前，先把Vue实例的this存到一个变量里，后续在回调里用这个变量操作data：

<template>
  <!-- 你的FilePond容器 -->
  <div id="filepond"></div>
</template>

<script>
import FilePond from 'filepond';
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [] // 用于存储服务器返回的文件信息
    };
  },
  mounted() {
    const vm = this; // 保存Vue实例的引用
    FilePond.setOptions({
      server: {
        process: (fieldName, file, metadata, load, error, progress, abort) => {
          // 执行上传请求
          axios.post('/your-upload-api', file, {
            onUploadProgress: (e) => {
              progress(e.loaded / e.total * 100);
            }
          })
          .then(res => {
            load(res.data.fileId); // 通知FilePond上传完成
            // 用vm操作data里的fileList
            vm.fileList.push({
              id: res.data.fileId,
              name: file.name,
              url: res.data.fileUrl
            });
          })
          .catch(err => {
            error('上传失败，请重试');
          });

          return {
            abort: () => {
              // 这里写取消上传的逻辑，比如中断axios请求
            }
          };
        }
      }
    });

    // 初始化FilePond实例
    FilePond.create(document.querySelector('#filepond'));
  }
};
</script>

方法二：使用箭头函数绑定this #

箭头函数不会绑定自己的this，会继承外层作用域的this（也就是Vue实例），直接在process回调里用箭头函数即可：

<template>
  <div id="filepond"></div>
</template>

<script>
import FilePond from 'filepond';
import axios from 'axios';

export default {
  data() {
    return {
      fileList: []
    };
  },
  mounted() {
    FilePond.setOptions({
      server: {
        // 用箭头函数定义process回调
        process: (fieldName, file, metadata, load, error, progress, abort) => {
          axios.post('/your-upload-api', file, {
            onUploadProgress: (e) => {
              progress(e.loaded / e.total * 100);
            }
          })
          .then(res => {
            load(res.data.fileId);
            // 直接用this操作fileList
            this.fileList.push({
              id: res.data.fileId,
              name: file.name,
              url: res.data.fileUrl
            });
          })
          .catch(err => {
            error('上传失败，请重试');
          });

          return {
            abort: () => {
              // 取消上传逻辑
            }
          };
        }
      }
    });

    FilePond.create(document.querySelector('#filepond'));
  }
};
</script>

注意事项 #

• 确保fileList已经在Vue组件的data选项中正确声明，是响应式数组。
• 如果使用的是vue-filepond官方封装组件，也可以直接监听组件的process-complete事件来处理服务器返回结果，写法会更贴合Vue的习惯，但核心逻辑还是基于this的正确指向。

内容的提问来源于stack exchange，提问作者dlkhjs