Question

对于使用<FilePond>进行多次文件上传，我想确保没有重复的文件名，例如，如果有两个文件具有相同的名称，则应该像file.pdf，而另一个文件应该获得file（1）。 pdf等。我该怎么办？

 <FilePond
                                    ref={ref => this.pond = ref}
                                    allowMultiple={true}
                                    acceptedFileTypes= 'application/pdf'
                                    onaddfile={async (error, fileItem) => {
                                        let obj = {};
                                        obj.id = fileItem.id;
                                        obj.name = fileItem.file.name;
                                        //obj.filestring = await this.toBase64(fileItem.file);
                                        obj.file=fileItem.file;
                                        obj.fileinProgress = false;
                                        obj.date = this.state.date;
                                        obj.report_type = this.state.selectedButton;
                                        obj.fileItem = fileItem.fileType;
                                        obj.readyToUpload = true;
                                        obj.fileUploaded = false;
                                        if (fileItem.fileType === 'application/pdf') {
                                            this.setState({ ["files" + obj.id]: obj});
                                        } else {
                                            toast.error("You can only upload PDF file");
                                        }
                                    }} />

Answer 1

您需要按以下步骤递归检查上传的文件。

checkUploadedFiles(name,n=1){
if(uploadedfiles.find(up=>up.name===name).length>0){
checkUploadedFiles(`${name}(n)`,n+1)
}
return name
}
 onaddfile={async (error, fileItem) => {
                                        let obj = {};
                                        obj.id = fileItem.id;
                                        obj.name = checkUploadedFiles(fileItem.file.name)
                                        obj.file=fileItem.file;
                                        obj.fileinProgress = false;
                                        obj.date = this.state.date;
                                        obj.report_type = this.state.selectedButton;
                                        obj.fileItem = fileItem.fileType;
                                        obj.readyToUpload = true;
                                        obj.fileUploaded = false;
                                        if (fileItem.fileType === 'application/pdf') {
                                            this.setState({ ["files" + obj.id]: obj});
                                        } else {
                                            toast.error("You can only upload PDF file");
                                        }
                                    }}

Answer 2

您始终可以在FilePond上指定 server 属性，在其中覆盖 process 函数，并进行预验证以有选择地拒绝某些文件。通过与所有当前附件的全局列表进行比较或使用实例的 getFiles 函数，您的部分预验证可能包括检查文件是否已存在。

我需要对文件进行一些清理，然后将其放入API可以接受的格式，这意味着将它们存储在包装对象的数组中，然后将其添加到通过网络发送的更大的对象中。由于我已经需要执行此步骤，因此很自然地需要使用全局文件列表对唯一文件名进行预先验证：

在实践中大致是这样的：

    <FilePond
    allowMultiple
    maxFiles={10}
    maxParallelUploads={10}
    server={
             { process: (fieldName, file, metadata, load, error, progress, abort) => {
                    if (this.attachments.findIndex(a => a.name == file.name) > -1) {
                        error(new Error('More than one file with the same name cannot be attached'));
                    }
                    this.attachments.push(file);
                    load(file.name);
              }
              revert: (uniqueFileId, load, error) => {
                    try {
                        const i = this.attachments.findIndex(a => a.name === uniqueFileId);
                        if (i > -1) {
                            this.attachments.splice(i, 1);
                        }
                    }
                    catch (e) {
                        console.error('error reverting attachment: ' + e);
                        error(e);
                    }
              }
            }
    />

请注意，在我的还原覆盖中，我还将附件从全局列表中删除

此处的文档：https://pqina.nl/filepond/docs/patterns/api/server/#advanced

希望有帮助！

使用filepond与react并希望验证或阻止同名上传

2 个答案: