vue实现文件的上传

2026-02-09 09:58:49VUE

Vue 文件上传实现方法

使用原生 input 元素

通过 input 元素的 type="file" 实现基础文件选择功能。在 Vue 模板中添加以下代码：

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

在 Vue 实例的 methods 中定义文件处理逻辑：

methods: {
  handleFileUpload(event) {
    const files = event.target.files;
    if (files.length > 0) {
      console.log('Selected file:', files[0]);
    }
  }
}

使用第三方库

对于更复杂的上传需求，可以使用 axios 或 vue-upload-component 等库：

安装 axios：

npm install axios

实现上传逻辑：

import axios from 'axios';

methods: {
  async uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('Upload success:', response.data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
}

文件预览功能

在文件选择后显示预览：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <img v-if="previewUrl" :src="previewUrl" width="200" />
  </div>
</template>

添加预览逻辑：

data() {
  return {
    previewUrl: null
  };
},
methods: {
  handleFileUpload(event) {
    const file = event.target.files[0];
    if (file) {
      this.previewUrl = URL.createObjectURL(file);
    }
  }
}

多文件上传

支持同时选择多个文件：

<input type="file" multiple @change="handleMultiUpload" />

处理多个文件：

methods: {
  handleMultiUpload(event) {
    const files = Array.from(event.target.files);
    files.forEach(file => {
      console.log('Selected file:', file.name);
    });
  }
}

进度显示

使用 axios 的 onUploadProgress 实现上传进度显示：

uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`Upload progress: ${percentCompleted}%`);
    }
  });
}

文件验证

在上传前进行文件类型和大小验证：

methods: {
  validateFile(file) {
    const validTypes = ['image/jpeg', 'image/png'];
    const maxSize = 2 * 1024 * 1024; // 2MB

    if (!validTypes.includes(file.type)) {
      alert('Only JPG and PNG files are allowed');
      return false;
    }

    if (file.size > maxSize) {
      alert('File size exceeds 2MB limit');
      return false;
    }

    return true;
  }
}

vue实现文件的上传