Javascript 如何还原FilePond JS中的进程文件？

我开始使用Filepond JS，对如何调用某些函数感到困惑。也许是因为我对ES6的知识不太好，或者我只是对整个问题想得太多了。该过程将文件上载到tmp文件夹。另一方面，revert应该从tmp文件夹中删除上载的文件

问题：我似乎无法恢复filepond中的上载

我尝试过的事情：

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', secureUrl("Model/filepond/index.php"));

            // 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
            request.upload.onprogress = (e) => {
               progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function() {
               if (request.status >= 200 && request.status < 300) {
                  // the load method accepts either a string (id) or an object
                  load(request.responseText);
               }
               else {
                   // Can call the error method if something is wrong, should exit after
                   error('oh no');
               }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
               abort: () => {
                  // This function is entered if the user has tapped the cancel button
                  request.abort();

                  // Let FilePond know the request has been cancelled
                  abort();
               }
            };
         },
         revert: (uniqueFileId, load, error) => {
            
            const formData = new FormData();
            formData.append(uniqueFileId);

            const request = new XMLHttpRequest();
            request.open('DELETE', secureUrl("Model/filepond-server-php-master/index.php"));

            request.send(formData);

            // Can call the error method if something is wrong, should exit after
            error('oh my goodness');

            // Should call the load method when done, no parameters required
            load();
          }
        }
      }
    );

// revert existing transfer
if ($request_method === 'DELETE') {
   return call_user_func($routes['REVERT_FILE_TRANSFER'], file_get_contents('php://input'));
}

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         url: secureUrl("Model/filepond/index.php"),
         process: './process',
         revert: './revert',
         restore: './restore/',
         load: './load/',
         fetch: null
       }
   }
);

使用uniqueFileId传递POST请求

正在传递具有uniqueFileId的删除请求

传递空的删除请求

感谢您的帮助

我的JS:

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', secureUrl("Model/filepond/index.php"));

            // 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
            request.upload.onprogress = (e) => {
               progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function() {
               if (request.status >= 200 && request.status < 300) {
                  // the load method accepts either a string (id) or an object
                  load(request.responseText);
               }
               else {
                   // Can call the error method if something is wrong, should exit after
                   error('oh no');
               }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
               abort: () => {
                  // This function is entered if the user has tapped the cancel button
                  request.abort();

                  // Let FilePond know the request has been cancelled
                  abort();
               }
            };
         },
         revert: (uniqueFileId, load, error) => {
            
            const formData = new FormData();
            formData.append(uniqueFileId);

            const request = new XMLHttpRequest();
            request.open('DELETE', secureUrl("Model/filepond-server-php-master/index.php"));

            request.send(formData);

            // Can call the error method if something is wrong, should exit after
            error('oh my goodness');

            // Should call the load method when done, no parameters required
            load();
          }
        }
      }
    );

// revert existing transfer
if ($request_method === 'DELETE') {
   return call_user_func($routes['REVERT_FILE_TRANSFER'], file_get_contents('php://input'));
}

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         url: secureUrl("Model/filepond/index.php"),
         process: './process',
         revert: './revert',
         restore: './restore/',
         load: './load/',
         fetch: null
       }
   }
);

---

我发现服务器可以简化为以下内容，这允许我们恢复上传。我不知道为什么另一种方法不起作用，但似乎效果很好

我的JS简化版：

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', secureUrl("Model/filepond/index.php"));

            // 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
            request.upload.onprogress = (e) => {
               progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function() {
               if (request.status >= 200 && request.status < 300) {
                  // the load method accepts either a string (id) or an object
                  load(request.responseText);
               }
               else {
                   // Can call the error method if something is wrong, should exit after
                   error('oh no');
               }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
               abort: () => {
                  // This function is entered if the user has tapped the cancel button
                  request.abort();

                  // Let FilePond know the request has been cancelled
                  abort();
               }
            };
         },
         revert: (uniqueFileId, load, error) => {
            
            const formData = new FormData();
            formData.append(uniqueFileId);

            const request = new XMLHttpRequest();
            request.open('DELETE', secureUrl("Model/filepond-server-php-master/index.php"));

            request.send(formData);

            // Can call the error method if something is wrong, should exit after
            error('oh my goodness');

            // Should call the load method when done, no parameters required
            load();
          }
        }
      }
    );

// revert existing transfer
if ($request_method === 'DELETE') {
   return call_user_func($routes['REVERT_FILE_TRANSFER'], file_get_contents('php://input'));
}

//File upload
FilePond.registerPlugin(
   FilePondPluginFileValidateSize,
   FilePondPluginFileValidateType,
   FilePondPluginFileEncode
);
    
const inputElement = document.querySelector("input[type='file']");

file = FilePond.create(
   inputElement,
   {
      credits: false,
      maxFileSize: "3000000",
      acceptedFileTypes: [
         'image/jpeg',
         'image/png',
         'application/pdf',
      ],
      fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
            resolve(type);
      }),
      server: {
         url: secureUrl("Model/filepond/index.php"),
         process: './process',
         revert: './revert',
         restore: './restore/',
         load: './load/',
         fetch: null
       }
   }
);

---

不确定是否相关，但您只应在完成时调用

load

，如果出现问题，则应在请求运行时调用

error

。