js文件拖拽上传

首先，我们需要给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);
    }
  };