时间戳

首页 > 解决方案 > 为什么粘贴事件 getAsFile 为非图像文件返回 null？

javascript - 为什么粘贴事件 getAsFile 为非图像文件返回 null？

问题描述

下面的代码片段显示了一个演示来处理文档上的粘贴事件，显示粘贴的项目信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<h3>Paste file</h3>
<div id="out">

</div>
<script>
  var $log = window.out;

  function log(s) {
    $log.innerHTML += `<div>${s}</div>`
  }

  document.addEventListener('paste', function (e) {
    const data = (e.originalEvent || e).clipboardData;
    log(`Text ${data.getData('text')}`);
    Array.from(data.items)
      .forEach((item, i) => {
        let file = item.getAsFile() || {};
        console.log(item.getAsFile())
        log(`Item[${i}] type=${item.type} kind=${item.kind} getAsFile=${item.getAsFile()} file.name=${file.name} file.type=${file.type} file.size=${file.size}`);
      })
  })
</script>
</body>
</html>

但是只能获取图像文件，而且文件类型不正确，image/png即使我粘贴jpg文件也总是返回。

当我粘贴一些其他类型的文件时，例如hello.txt，getAsFile将返回null，我该如何处理其他类型的粘贴文件？

我在macos chrome 79.0.3945.130下的日志是这样的

Text back.jpg
Item[0] type=text/plain kind=string getAsFile=null file.name=undefined file.type=undefined file.size=undefined
Item[1] type=image/png kind=file getAsFile=[object File] file.name=image.png file.type=image/png file.size=6232743

Text hello.txt
Item[0] type=text/plain kind=string getAsFile=null file.name=undefined file.type=undefined file.size=undefined
Item[1] type=image/png kind=file getAsFile=null file.name=undefined file.type=undefined file.size=undefined

标签： javascripthtmldomdom-events

解决方案

推荐阅读