JavaScript 异步 readAsDataURL 多个文件

Question

我有一个需要保存的文件列表，除了名称之外，我还需要将 readAsDataURL 发送到服务器。

问题是我不确定如何使用 readAsDataURL 的异步特性来完成它。因为要将 DATAURL 保存到数组中，我需要查找文件列表中的文件名。而且我无法将文件传递给 readAsDataURL 的异步方法。你如何正确地写这个来工作？最终结果是我想要一个 JSZip 文件中的文件列表发送到服务器。

function saveFileList(files)
{
    for (var i = 0, file; file = files[i]; i++) {

        var fr = new FileReader();
        fr.onload = function(e){
        if (e.target.readyState == FileReader.DONE) {
            var tt = e.target.result.split(",")[1];
                             //update the record in the list with the result
            }
         };

        var pp = fr.readAsDataURL(file);
  }

Answer 1

如果你有 FileList 并且你需要获取 base64 字符串数组，你需要这样做

export async function fileListToBase64(fileList) {
  // create function which return resolved promise
  // with data:base64 string
  function getBase64(file) {
    const reader = new FileReader()
    return new Promise(resolve => {
      reader.onload = ev => {
        resolve(ev.target.result)
      }
      reader.readAsDataURL(file)
    })
  }
  // here will be array of promisified functions
  const promises = []

  // loop through fileList with for loop
  for (let i = 0; i < fileList.length; i++) {
    promises.push(getBase64(fileList[i]))
  }

  // array with base64 strings
  return await Promise.all(promises)
}

这样使用

const arrayOfBase64 = await fileListToBase64(yourFileList)