0

对于文件多重上传，<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");
                                        }
                                    }} />
4

2 回答 2

0

您始终可以在 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

希望有帮助！

于 2020-01-13T17:07:46.137 回答
0

您需要递归检查您上传的文件，如下所示。

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");
                                        }
                                    }}
于 2019-12-12T06:37:58.117 回答