javascript 使用异步时出错，等待文件读取器

14ifxucb 于 2023-02-28 发布在 Java

关注(0)|答案(3)|浏览(147)

我正在尝试使用FileReader读取文件：

async readFile(event: any) {
    var file = event.target.files[0];
    var data:string
    if (file) {   
        var reader:FileReader = new FileReader();
         reader.onload = async function (evt : FileReaderEvent) {
            data = await evt.target.result;
            console.log(evt.target.result);

        };
        console.log(file);
        console.log(data);
        await reader.readAsText(file);
        await this.processFileContent(data);
    }
 }

然而，evt.target.result在我调用console.log（file）之后仍然会被打印出来。
有人知道如何获得文件的结果并将其传递给processFileContent函数吗？

JavaScript

来源：https://stackoverflow.com/questions/48172934/error-using-async-and-await-with-filereader

3条答案

按热度按时间

qncylg1j1#

对blob本身使用新的读取方法

/** @type {Event} evt */
async readFile (evt) {
  const [file] = evt.target.files
  if (!file) return
  const data = await file.text()
  return this.processFileContent(data)
}

备选方案：

evt.target.files[0]?.text().then(this.processFileContent)

赞(0）回复(0）举报 2023-02-28

7uhlpewt2#

需要利用reader将blob转换为base64，更喜欢使用async-await语法，所以我选择将reader逻辑提取到helper中，如下所示：

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

并在主代码中使用await调用它：

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)

赞(0）回复(0）举报 2023-02-28

d7v8vwbk3#

const logFile = async (e) => {
  const { image } = await readImage(e.target.files[0])
  document.getElementById("image").appendChild(image)
}

const readImage = (
  file
) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const image = new Image();
      image.src = e.target?.result;

      image.onload = () => {
        resolve({ image, sizeInMB: Math.round(file.size / 1024 / 1024) });
      };

      image.onerror = () => {
        reject(`couldn't read image`);
      };
    };

    reader.onerror = (e) => {
      reject(`couldn't read image`);
    };

    reader.readAsDataURL(file);
  });
};

#image > img {
  width: 100px;
  height: 100px;
}

<strong>upload image</string>
<input type="file" onchange="logFile(event)" />
<div style="width:100px;height:100px" id="image"></div>

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 使用异步时出错，等待文件读取器

3条答案

相关问题

热门标签

最新问答