当前位置：首页 > VUE

vue实现文件在线加载

2026-02-21 00:20:19VUE

实现文件在线加载的基本思路

在Vue中实现文件在线加载通常涉及前端文件读取、后端文件传输及前后端交互。以下是具体实现方法：

前端文件读取

使用HTML5的File API或第三方库（如Dropzone.js）实现文件选择与读取：

<template>
  <input type="file" @change="handleFileUpload" />
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const content = e.target.result;
          console.log(content); // 文件内容
        };
        reader.readAsText(file); // 按文本读取
      }
    }
  }
}
</script>

后端文件传输

若需从服务器加载文件，使用Axios发起HTTP请求：

import axios from 'axios';

export default {
  methods: {
    async loadFileFromServer(url) {
      try {
        const response = await axios.get(url, { responseType: 'blob' });
        const blob = new Blob([response.data]);
        const fileUrl = URL.createObjectURL(blob);
        window.open(fileUrl); // 在新窗口打开文件
      } catch (error) {
        console.error('文件加载失败:', error);
      }
    }
  }
}

文件预览与渲染

对于常见文件类型（如PDF、图片），使用专用组件或库：

// PDF预览（使用pdf.js）
<template>
  <canvas ref="pdfCanvas"></canvas>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  methods: {
    async renderPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = this.$refs.pdfCanvas;
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      page.render({
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      });
    }
  }
}
</script>

大文件分片加载

处理大文件时可采用分片加载：

vue实现文件在线加载

async loadLargeFile(url, chunkSize = 1024 * 1024) {
  let offset = 0;
  let chunks = [];

  while (true) {
    const response = await axios.get(url, {
      headers: { 'Range': `bytes=${offset}-${offset + chunkSize - 1}` },
      responseType: 'arraybuffer'
    });

    if (response.status === 206) {
      chunks.push(response.data);
      offset += chunkSize;
    } else {
      break;
    }
  }

  const fullData = new Blob(chunks);
  return URL.createObjectURL(fullData);
}