使用FilePond和Vue js上传文件

时间:2020-07-14 07:36:38

标签: vue.js filepond

我想使用FilePond和Vue.js上传文件。当我选择文件时,我想向api发出发布请求,直到获得响应为止,我想向api发出get请求以获取过程值并将其显示在屏幕上。 我尝试这样做:

                          <file-pond
                                    ref="pond"
                                    label-idle="Drop files here..."
                                    accepted-file-types="image/jpeg, image/png, application/pdf, image/tiff, image/bmp"
                                    maxFileSize="30MB"
                                    :server="server"

                            />
server:{
                    process: (fieldName, file, metadata, load, error, progress, abort) => {
                        const formData = new FormData();
                        this.file = file.name;

                        formData.append('proof-of-relationship', file, file.name);
                        const progressId = uuid.v1();

                        axios.post(
                            uploadUrl,
                            formData,
                            {
                                onUploadProgress: (e) => {
                                    console.log(e);
                                    progress(e.lengthComputable, e.loaded, e.total)
                                }
                            }
                        )
                            .then(response => {
                                console.log(response);
                                                          })
                            .finally(()=> {
                                this.isLoadingProcess = false;
                            })
                    },
}

我不知道应该在哪里调用api的get requst来获取过程值并显示它。另外,我也想一次上传文件,而无需点击гupload按钮

0 个答案:

没有答案