cae导出的csv文件在three中加载（二）

一、选择文件夹以及拖拽文件上传

大体实现逻辑如下，使用input 输入框设置 type=“file” 监听拖拽事件，使用 @drop.prevent 获取拖拽的文件
注意重置文件输入值 evt.target.value = null; 否则拖拽同一文件夹不会触发上传文件

 <div class="uploadView">
      <div
        class="upload"
        @dragover.prevent="handleDragOver"
        @drop.prevent="handleFileSelect"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text" @click="promptFolderSelection">
          拖拽文件到此或者<span style="color: var(--el-color-primary)"
            >点击选择文件</span
          >
          <p>仅支持csv文件，请将csv文件置于文件夹内上传文件夹</p>
        </div>
        <input
          type="file"
          ref="folderInput"
          webkitdirectory
          style="display: none"
          @change="handleFileInput"
        />
        <ul class="fileList">
          <li v-for="file in files" :key="file.name">{{ file.name }}</li>
        </ul>
      </div>
      <div class="footer">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="clearAll">清空</el-button>
      </div>
    </div>

<script setup>
// 点击选择
const promptFolderSelection = () => {
  folderInput.value.click();
};
const handleFileInput = (evt) => {
  const datas = evt.target.files;
  for (let i = 0; i < datas.length; i++) {
    const file = datas[i];
    if (file) {
      if (file.name.toLowerCase().endsWith(".csv")) {
        // 检查文件名是否已经存在
        const fileExists = files.value.some(
          (existingFile) => existingFile.name === file.name
        );
        console.log("🚀 ~ handleFileInput ~ fileExists:", fileExists)
        if (!fileExists) {
          // 如果文件名尚不存在，则添加文件
          files.value.push(file);
        }
      }
    }
  }
  // 重置文件输入值
  evt.target.value = null;
};
// 拖拽选择
const handleDragOver = (evt) => {
  evt.preventDefault();
};
const handleFileSelect = (evt) => {
  let items = evt.dataTransfer.items;
  for (let i = 0; i < items.length; i++) {
    let item = items[i].webkitGetAsEntry();
    if (item) {
      traverseFileTree(item);
    }
  }
};
const traverseFileTree = (item, path = "") => {
  if (item.isFile) {
    // 检查文件的扩展名是否为.csv
    if (item.name.toLowerCase().endsWith(".csv")) {
      item.file((file) => {
        // 检查文件名是否已经存在
        const fileExists = files.value.some(
          (existingFile) => existingFile.name === file.name
        );
        if (!fileExists) {
          // 如果文件名尚不存在，则添加文件
          files.value.push(file);
        }
      });
    }
  } else if (item.isDirectory) {
    let dirReader = item.createReader();
    dirReader.readEntries((entries) => {
      for (let i = 0; i < entries.length; i++) {
        traverseFileTree(entries[i], path + item.name + "/");
      }
    });
  }
};
</script>

文件拖拽效果

二、顶点优化代码

昨天写的findPointAverage 方法在每次迭代中调用，其内部还运行了一个过滤操作。这意味着对于每个点，你都在遍历整个 mians数组。这会导致你的算法具有平方复杂性，即 O(n²)。一个解决方案是预计算一个查找表，包含每个点的平均值。这样，就可以在 O(1) 时间内找到任何给定点的平均值。

let averageLookup = {};
points.forEach((p, idx) => {
  averageLookup[idx] = findPointAverage(p["Node Idx"]);
});
// 然后，在迭代 points数组时，你可以通过查阅这个预先计算好的查找表来获取平均值：
for (let i = 0; i < points.length; i++) {
  let p = points[i];
  vertices.push(
    parseFloat(p.XCoord),
    parseFloat(p.YCoord),
    parseFloat(p.ZCoord)
  );
  thicknessValues.push(averageLookup[p["Node Idx"]]);
}

最终效果

参考上一篇博客：
cae导出的csv文件在three中加载（一）