vue实现gltf文件上传

2026-02-21 23:08:46VUE

上传GLTF文件的基本流程

在Vue中实现GLTF文件上传需要结合文件上传组件和GLTF解析库。通过HTML的<input type="file">元素获取文件，使用FileReader读取文件内容，最后用Three.js等库加载GLTF模型。

安装必要依赖：

npm install three @types/three

创建文件上传组件

创建Vue组件包含文件选择输入框：

vue实现gltf文件上传

<template>
  <div>
    <input type="file" accept=".gltf,.glb" @change="handleFileUpload" />
    <div ref="rendererContainer"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => this.loadGLTF(e.target.result);
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

加载并渲染GLTF模型

在组件中实现GLTF加载逻辑：

methods: {
  loadGLTF(arrayBuffer) {
    const loader = new GLTFLoader();
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(400, 400);
    this.$refs.rendererContainer.appendChild(renderer.domElement);

    loader.parse(arrayBuffer, '', (gltf) => {
      scene.add(gltf.scene);
      camera.position.z = 5;

      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    });
  }
}

处理大文件上传

对于大文件需要分片上传：

vue实现gltf文件上传

async uploadLargeFile(file) {
  const chunkSize = 5 * 1024 * 1024; // 5MB
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const formData = new FormData();
    formData.append('file', chunk);

    await axios.post('/upload', formData, {
      headers: {
        'Content-Range': `bytes ${offset}-${offset + chunk.size - 1}/${file.size}`
      }
    });

    offset += chunkSize;
  }
}

显示上传进度

添加进度条反馈：

<template>
  <progress :value="uploadProgress" max="100"></progress>
</template>

<script>
export default {
  data() {
    return {
      uploadProgress: 0
    };
  },
  methods: {
    uploadWithProgress(file) {
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      });
    }
  }
}
</script>

服务端接收处理

Node.js示例接收GLTF文件：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log('File saved:', req.file.path);
  res.sendStatus(200);
});