首先,我们需要给input父元素绑定拖拽监听事件
<div class="file-content" :style="{ borderColor: borderColor }" @dragleave="preventDefaultEvent" @dragenter="preventDefaultEvent" @dragover="onDragOver" @drop="onDrop">
<p>JSON或CSV文件拖放到此处</p>
<el-button @click="selFile">选择一个文件</el-button>
<input id="updateInput" ref="updateInput" @change="fileSelected" type="file" accept=".json,.csv style="display: none;" />
</div>
ondrop
在拖拽过程中,监听鼠标释放
释放后,边框样式恢复灰色
拿到文件:const files = e.dataTransfer.files;
ondragover
当某被拖动的对象在另一对象容器范围内拖动时触发此事件
此时,边框颜色为蓝色
限制文件上传类型
input属性accept,添加类型后缀,用,逗号隔开
readAsText
拿到ondrop里的文件后,进行解析,读取文件,readAsText默认解析utf-8格式的文件
let fileBlob = files[0];
let reader = new FileReader();
reader.readAsText(fileBlob, "UTF-8");
reader.onload = function (e) {
try {
let data = this.result as string;
// csv转换为json格式
if (fileBlob.type == "text/csv") {
data = csvJSON(data);
}
let message = typeof data == "string" ? eval("(" + data + ")") : data;
console.log(message);
} catch (error) {
console.log(error);
}
};