拖放：未捕获的 TypeError：无法在 \'FileReader\' 上执行 \'readAsDataURL\'：参数 1 不是类型 \'Blob\'答案

【问题标题】：Drag and Drop: Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'拖放：未捕获的 TypeError：无法在 \'FileReader\' 上执行 \'readAsDataURL\'：参数 1 不是类型 \'Blob\'
【发布时间】：2022-10-07 08:28:22
【问题描述】：

我正在创建一个快速阅读器，它首先接收 PDF 并将其转换为文本。我设置了一个拖放区域和一个按钮，可以进入用户文件进行选择。

文件选择有效，我可以读取文件，但是当我尝试使用拖放时，它不起作用并且出现错误。任何帮助将不胜感激！

这是我所拥有的（我对 JS 还是很陌生）：

<!--drag and drop file upload-->
<div class="bottom">
    <div id="drop-area">
        <form class="my-form">
            <p id="drop-text">Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>

            <input type="file" id="fileElem" name="fileElem" multiple accept=".pdf" onchange="handleFiles(this.files)" />

            <progress id="progress-bar" max=100 value=0></progress>

            <div><label class="button" for="fileElem">Select some files</label></div>
        </form>
        <div id="gallery"></div>
    </div>
    <div><button class="button" id="submit" onclick="convert()">Process PDF</button></div>
</div>

...
<script type="text/javascript">
    let dropArea = document.getElementById('drop-area')

    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false)
    })

    function preventDefaults(e) {
        e.preventDefault()
        e.stopPropagation()
    }

    ;['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false)
    })

    ;['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false)
    })

...

    dropArea.addEventListener('drop', handleDrop, false)

    function handleDrop(e) {
        let dt = e.dataTransfer
        let files = dt.files

        handleFiles(files)
    }

    function handleFiles(files) {
        files = [...files]
        initializeProgress(files.length) // <- Add this line
        files.forEach(uploadFile)
        files.forEach(previewFile)
    }

    //pdf reading
    function convert() {
        var fr=new FileReader();
        var pdff = new Pdf2TextClass();
        fr.onload=function(){
            pdff.pdfToText(fr.result, null, (text) => { document.getElementById('full-text').innerText += text; });
        }
        fr.readAsDataURL(document.getElementById('fileElem').files[0])
    }

当我进行故障排除时，我得出的结论是我在 handleDrop 函数中遗漏了一些东西。

错误 1：当我拖放文件时。

错误 2：当我尝试处理它时。

错误 3：当我选择文件时。

下一节：选定文件的工作处理。

【问题讨论】：

标签： javascript drag-and-drop blob

【解决方案1】：

我这样写并运行它。

  if (reader.readAsDataURL && uploadFile instanceof Blob) {
                    reader.readAsDataURL(uploadFile);
     }

【讨论】：