使用await异步显示浏览文件对话框的方法？

Question

有工作代码可以在另一个问题中打开文件浏览对话框。我想将其设为等待异步调用。

这是原始问题，它在我的测试中有效。

为了方便起见，我在此处添加了剪刀：

// wait for window to load
window.addEventListener("load", windowLoad);

// open a dialog function
function openFileDialog (accept, multy = false, callback) { 
    var inputElement = document.createElement("input");
    inputElement.type = "file";
    inputElement.accept = accept; // Note Edge does not support this attribute
    if (multy) {
        inputElement.multiple = multy;
    }
    if (typeof callback === "function") {
         inputElement.addEventListener("change", callback);
    }
    inputElement.dispatchEvent(new MouseEvent("click")); 
}

// onload event
function windowLoad () {
    // add user click event to userbutton
    userButton.addEventListener("click", openDialogClick);
}

// userButton click event
function openDialogClick () {
    // open file dialog for text files
    openFileDialog(".txt,text/plain", true, fileDialogChanged);
}

// file dialog onchange event handler
function fileDialogChanged (event) {
    [...this.files].forEach(file => {
        var div = document.createElement("div");
        div.className = "fileList common";
        div.textContent = file.name;
        userSelectedFiles.appendChild(div);
    });
}

.common {
    font-family: sans-serif;
    padding: 2px;
    margin : 2px;
    border-radius: 4px;
 }
.fileList {
    background: #229;
    color: white;
}
#userButton {
    background: #999;
    color: #000;
    width: 8em;
    text-align: center;
    cursor: pointer;
}

#userButton:hover {
   background : #4A4;
   color : white;
}

<a id = "userButton" class = "common" title = "Click to open file selection dialog">Open file dialog</a>
<div id = "userSelectedFiles" class = "common"></div>

这是我所拥有的：

async browseForFile(acceptedTypes: string, multiple?: boolean): Promise<array> {
      var element = document.createElement("input");
      element.type = "file";
      element.accept = acceptedTypes;
      if (multiple) {
         element.multiple = multiple;
      }

      new Promise((resolve, reject) => {
         element.addEventListener("change", resolveCallback);
      })

      var resolveCallback = (event)=> {
         return event.currentTarget.files;
      }
      
      element.dispatchEvent(new MouseEvent("click")); 
   }

建议用法：

try {
   var files = await browseForFile("*.txt");
}
catch(error) {
   // no files selected
}

第二次尝试：

   browseForFile(callback: any, acceptedTypes: string, multiple?: boolean): Promise<array> {
      var element = document.createElement("input");
      element.type = "file";
      element.accept = acceptedTypes;
      if (multiple) {
         element.multiple = multiple;
      }

      new Promise((resolve, reject) => {
         
         var resolveCallback = (event)=> {
            var input = event.currentTarget;
            if (input.files==null) {
               reject();
            }
            else {
               resolve(input.files);
            }
         }

         element.addEventListener("change", resolveCallback);
      });
      
      
      element.dispatchEvent(new MouseEvent("click")); 
   }

Answer 1

您需要返回承诺，以便您可以等待函数。

并且 Promise 需要使用您希望

resolve()

返回的值来调用

await

。

browseForFile(acceptedTypes: string, multiple ? : boolean): Promise < array > {
  var element = document.createElement("input");
  element.type = "file";
  element.accept = acceptedTypes;
  if (multiple) {
    element.multiple = multiple;
  }

  let p = new Promise((resolve, reject) => {
    element.addEventListener("change", event => resolve(resolveCallback(event)));
  })

  var resolveCallback = (event) => {
    return event.currentTarget.files;
  }

  element.dispatchEvent(new MouseEvent("click"));
  return p;
}