javascript - 如何确保在使用 puppeteer 提交之前等待文件完成上传？

Question

我需要使用 puppeteer 上传文件，然后在文件上传完成后按提交按钮。现在它立即按下提交，这为时过早。
我当了 puppeteer handle.uploadFile('file_path.ext')会在解决之前等待上传完成，但看起来没有。
编辑:为了澄清，根据@ggorlen 的评论，我们正在使用 https://github.com/kartik-v/bootstrap-fileinput包来处理我们输入字段的行为。

Answer 1

我一直在尝试查找要监听的事件或响应以了解文件已完成上传，但没有找到任何有用的信息。以下是我想出的最好的方法，到目前为止，它对我的​​情况有效:

// Get the input
let selector = `input[type=file]`;
let file_input_handle = await page.waitForSelector( selector );

// This comes before the upload starts
// Notice `await` is missing. Don't wait for this to finish now.
// This will be working in the background so we can use it later.
let disabled_selector = `${ selector }[disabled]`;
let wait_for_disabled = page.waitForSelector( disabled_selector );

// Upload
await handle.uploadFile(...paths);

// Stop to wait for the input to be disabled. If it already happened by now
// then this will be done already and it won't wait.
await wait_for_disabled;

// Now DO use `await` to wait for the input to be enabled again.
// On the webpage I'm working with, that means the files are done uploading.
let enabled_selector = `${ selector }:not([disabled])`;
await page.waitForSelector( enabled_selector );

// Do the next thing, like submitting the form
console.log( `Done uploading!` );

编辑:
正如我所说，这是特定于我的情况。我们正在使用 https://github.com/kartik-v/bootstrap-fileinput在上传过程中禁用输入的库。
另外，根据@ggorlen 的建议，我举了一个例子。我会把代码放在这里，但你可以在 https://jsfiddle.net/tgfp4x6h/3/ 看到它.我不确定 puppeteer 会在 jsfiddle 中工作，我不确定如何在那里存储文件以加载，所以我决定只使用我自己的 promise 作为例子。
这意味着 您必须手动上传文件在工作中看到它。在此过程中，您将能够看到背景颜色从红色变为绿色。打开浏览器控制台以查看发生的操作的日志。确保上传一堆图像或其他内容，以便您需要足够长的时间才能看到更改的发生。

<!-- bootstrap 5.x or 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- default icons used in the plugin are from Bootstrap 5.x icon library (which can be enabled by loading CSS below) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">

<!-- alternatively you can use the font awesome icon library if using with `fas` theme (or Bootstrap 4.x) by uncommenting below. -->
<!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous" -->

<!-- the fileinput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->

<!-- the jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/plugins/piexif.min.js" type="text/javascript"></script>

<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- the main fileinput plugin script JS file -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/fileinput.min.js"></script>

<!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/themes/fas/theme.min.js"></script -->

<!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.2/js/locales/LANG.js"></script>

<input id="input_id" name="file_data" type="file" multiple>

<script>
$(document).ready(function() {
    // initialize with defaults
    $("#input_id").fileinput();

    // with plugin options
    $("#input_id").fileinput({'uploadUrl': '/path/to/your-upload-api', 'previewFileType': 'any'});
});
</script>

// Bootstrap input from https://github.com/kartik-v/bootstrap-fileinput

let waitForDisabled = function (resolve, reject) {

    console.log('waiting for disabled');
    let disabled_node = document.querySelector('input#input_id[disabled]');
  
  if ( disabled_node ) {
    // If node is found, finish
    resolve()
    console.log( disabled_node );
    
  } else {
    // otherwise, loop
    setTimeout(function() {
        waitForDisabled( resolve, reject );
    }, 100);
  }
}

let waitForEnabled = function (resolve, reject) {

    console.log('waiting for enabled');
    let enabled_node = document.querySelector('input#input_id:not([disabled])');
  
  if ( enabled_node ) {
    // If node is found, finish
    resolve()
    console.log( enabled_node );
    
  } else {
    // otherwise, loop
    setTimeout(function() {
        waitForEnabled( resolve, reject );
    }, 100);
  }
}

let uploadFile = function ( resolve, reject ) {
    // This would be uploading the file, but you should do it by hand
  resolve();
};


let wait_for_it = async function () {
  
  let waiting_for_disabled = new Promise( waitForDisabled );
  
  await new Promise( uploadFile );
  
  await waiting_for_disabled;
  await new Promise( waitForEnabled );
  console.log( 'Done uploading!' );
}

wait_for_it();