当前位置：首页 > VUE

vue实现上传文件

2026-01-17 10:22:49VUE

Vue 实现文件上传的方法

使用原生 HTML 文件输入

在 Vue 模板中添加文件输入元素，通过 @change 事件监听文件选择。

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

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      console.log('Selected file:', file);
    }
  }
}
</script>

使用 FormData 发送文件

通过 FormData 对象将文件数据发送到服务器。

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 successful:', response.data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
}

使用第三方库

可以集成如 vue-dropzone 或 vue-upload-component 等专门的文件上传组件。

安装示例（以 vue-upload-component 为例）：

npm install vue-upload-component

使用示例：

<template>
  <file-upload @input-file="onFileSelect"></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  methods: {
    onFileSelect(file) {
      console.log('File selected:', file);
    }
  }
}
</script>

显示上传进度

利用 axios 的 onUploadProgress 回调显示上传进度。

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

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

    await axios.post('/api/upload', formData, config);
  }
}

文件预览

在客户端实现图片文件预览功能。

<template>
  <input type="file" @change="previewImage" />
  <img v-if="imageUrl" :src="imageUrl" alt="Preview" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null
    };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      if (file && file.type.match('image.*')) {
        this.imageUrl = URL.createObjectURL(file);
      }
    }
  }
}
</script>

文件验证

在上传前验证文件大小和类型。

vue实现上传文件

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

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

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

    return true;
  }
}