vue实现文件上传

2026-02-11 09:38:29VUE

使用 Vue 实现文件上传

基本文件上传实现

在 Vue 中实现文件上传可以通过 <input type="file"> 元素结合 FormData 完成。以下是一个基础示例：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) return;

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

      fetch('https://your-api-endpoint.com/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
};
</script>

使用 Axios 发送文件

如果需要更强大的 HTTP 客户端功能，可以使用 Axios：

import axios from 'axios';

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

    axios.post('https://your-api-endpoint.com/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log('上传成功:', response.data);
    })
    .catch(error => {
      console.error('上传失败:', error);
    });
  }
}

显示上传进度

可以通过 Axios 的 onUploadProgress 回调显示上传进度：

vue实现文件上传

axios.post('https://your-api-endpoint.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percentCompleted}%`);
  }
})

多文件上传

如果需要上传多个文件，可以修改文件选择处理逻辑：

handleFileUpload(event) {
  this.files = Array.from(event.target.files);
},
uploadFiles() {
  const formData = new FormData();
  this.files.forEach(file => {
    formData.append('files[]', file);
  });

  axios.post('https://your-api-endpoint.com/multi-upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  // 处理响应
}

文件类型和大小验证

在上传前可以添加验证逻辑：

vue实现文件上传

handleFileUpload(event) {
  const file = event.target.files[0];
  const allowedTypes = ['image/jpeg', 'image/png'];
  const maxSize = 5 * 1024 * 1024; // 5MB

  if (!allowedTypes.includes(file.type)) {
    alert('仅支持JPEG和PNG格式');
    return;
  }

  if (file.size > maxSize) {
    alert('文件大小不能超过5MB');
    return;
  }

  this.file = file;
}

使用第三方库

对于更复杂的需求，可以考虑使用专门的 Vue 文件上传组件：

vue-dropzone：提供拖放上传功能
vue-upload-component：功能丰富的上传组件

安装 vue-upload-component 示例：

npm install vue-upload-component

使用示例：

<template>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="https://your-api-endpoint.com/upload"
    @input-file="onInputFile"
  ></file-upload>
</template>

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

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    onInputFile(newFile, oldFile) {
      // 处理文件变化
    }
  }
};
</script>

以上方法涵盖了从基础到进阶的文件上传实现，可以根据项目需求选择适合的方案。