如何在vue js中使用Filepond以及如何使用axios上传文件? [英] How to use Filepond in vue js and to upload files using axios?

问题描述

我需要使用axios发送发布请求，以便使用Filepond Uploader上传文件.

I need to use axios to send post request in order to upload files using Filepond Uploader.

我该怎么办?

我正在使用如下所示的自定义流程处理程序，但无法正常工作.

I'm using a custom process handler like below but it's not working.

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();
          }
        };
      }

我正在使用本指南，但我不清楚了解如何创建上传和加载过程来处理服务器的响应和请求.

I'm using this guide but it's not clear for me to understand how can i create upload and load process to handle my server response and request.

谢谢.

推荐答案

FilePond作者在此处.

FilePond author here.

我不能完全确定我了解问题的描述，但是我会尽力提供帮助.我快速浏览了Axios文档( https://github.com/axios/axios)并设置以下代码段.

I'm not entirely sure I understand the problem description but I'm going to try my best to help out. I've taken a quick peek at the Axios docs (https://github.com/axios/axios) and set up the following snippet.

{
    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上传文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！