Question

我需要使用axios发送发布请求，以便使用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），并设置了以下代码段。

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.');
        }
    };
};

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

1 个答案: