JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target" title="拖动文件到这里">
    <div id="content"></div>
</div>

CSS

#target{
    margin:10px;
    min-height:100px;
    max-height:600px;
    background-color:#EEE;
    border-radius:5px;
    overflow:auto;
}
#content{
    padding:10px;
    font-size:18px;
    line-height:25px;
}

JavaScript

var target = document.querySelector('#target');
var contentDiv = document.querySelector('#content');

target.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
    return false;
});

target.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    var fileList = e.dataTransfer.files;
    
    if (fileList.length) {
        var file = fileList[0];
        var reader = new FileReader();
        reader.onloadend = function(e) {
            if (e.target.readyState == FileReader.DONE) {
            		console.log(reader.result)
                var content = reader.result;
                contentDiv.innerHTML = 'File: ' + file.name + '\n\n' + content;
            }
        }
        
        reader.readAsDataURL(file);
    }
});