如何在vue js中使用Filepond并使用axios上传文件？

Question

我需要使用 axios 发送 post 请求才能使用 Filepond Uploader 上传文件。

我该怎么做？

我正在使用如下所示的自定义流程处理程序，但它不起作用。

processHandler: (fieldName, file, metadata, load, error, progress, abort) => {
        let formData = new FormData();
        let uploadPercentage = 0;
        formData.append('file', file);
        console.log(formData);

        HTTP.post('v1/upload', formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: function (progressEvent) {
              uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
              console.log(uploadPercentage);
            }.bind(this)
          })
          .then((response) => {
            console.log(response);
            // Should call the load method when done and pass the returned server file id
            // the load method accepts either a string (id) or an object
            // the unique server file id is used by revert and restore functions
            load(response.data.data.id);
          })
          .catch((error) => {
            console.error(error);
            error("Has error");
          });

        // Should call the progress method to update the progress to 100% before calling load
        // Setting computable to false switches the loading indicator to infinite mode
        // (computable, processedSize, totalSize)
        progress(true, 0, 1024);

        // Should expose an abort method so the request can be cancelled
        return {
          abort: () => {
            // User tapped abort, cancel our ongoing actions here

            // Let FilePond know the request has been cancelled
            abort();
          }
        };
      }

我正在使用this guide，但我不清楚如何创建上传和加载过程来处理我的服务器响应和请求。

谢谢。

Answer 1

FilePond 作者在这里。

我不完全确定我是否理解问题描述，但我会尽力提供帮助。我快速浏览了 Axios 文档 (https://github.com/axios/axios) 并设置了以下 sn-p。

{
    processHandler: (fieldName, file, metadata, load, error, progress, abort) => {

        // set data
        const formData = new FormData();
        formData.append('file', file, file.name);

        // related to aborting the request
        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();

        // the request itself
        axios({
            method: 'post',
            url: 'v1/upload',
            data: formData,
            cancelToken: source.token,
            onUploadProgress: (e) => {
                // updating progress indicator
                progress(e.lengthComputable, e.loaded, e.total);
            }
        }).then(response => {
            // passing the file id to FilePond
            load(response.data.data.id)
        }).catch((thrown) => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                // handle error
            }
        });

        // Setup abort interface
        return {
            abort: () => {
                source.cancel('Operation canceled by the user.');
            }
        };
    };
}