为什么无法两次使用Filepond组件上传文件?

时间:2019-10-23 12:04:52

标签: filepond

第一次打开poup模式上传文件是可行的!但是完成了第一次上传过程,第二次打开弹出模型,然后选择文件,单击uploadfiles pool.getFiles()为空。因此不处理上传文件, 为什么?如何解决这个问题

  let pond;
  //open popup modal window select files
   function importpic() {
     $('#importModal').modal('toggle');
     $('#label').val('');
     $('#description').val('');
     const inputElement = document.querySelector('input[type="file"]');
     pond = FilePond.create(inputElement);
   }
  //execute upload files
   function uploadfiles() {
     if (pond) {
       var v = $('#uploadfiles-form').valid();
       var files = pond.getFiles();
       console.log(files, v);
       if (v && files.length > 0) {
         pond.processFiles().then(() => {
           $('#importModal').modal('toggle');
           reload();
           pond.removeFiles();
         });
       }
     }
   }

1 个答案:

答案 0 :(得分:0)

我尝试

   function configFilePond() {
      FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize
      );
      FilePond.setOptions({
        instantUpload:false,
        server: {
          timeout: 7000,
          process: {
            url: '/FaceLibs/UploadFiles',
            method: 'POST',
            ondata: (formData) => {
              formData.append('label', $('#label').val());
              formData.append('description', $('#description').val());
              return formData;
            }
          },
          revert: '/FaceLibs/Revert',
        },

      })
   }
   configFilePond();
    //let pond;
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
function importpic() {
      $('#importModal').modal('toggle');
      $('#label').val('');
      $('#description').val('');
   }

    function uploadfiles() {
      if (pond) {
        var v = $('#uploadfiles-form').valid();
        var files = pond.getFiles();
        console.log(files, v);
        if (v && files.length > 0) {
          pond.processFiles().then(() => {
            $('#importModal').modal('toggle');
            reload();
            pond.removeFiles();
          });
        }
      }
    }

这是很好的工作