vue 实现上传文件

2026-01-19 15:15:23VUE

使用 Vue 实现文件上传

基础文件上传

通过 HTML 的 <input type="file"> 元素结合 Vue 的 v-on:change 事件监听文件选择。在方法中通过 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);

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

多文件上传

修改 handleFileUpload 方法以支持多文件选择，并通过循环将多个文件添加到 FormData 中。

handleFileUpload(event) {
  this.files = event.target.files; // 改为数组存储
},
uploadFiles() {
  const formData = new FormData();
  Array.from(this.files).forEach(file => {
    formData.append('files[]', file);
  });

  axios.post('/upload-multiple', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

文件预览

在文件选择后，通过 FileReader 对象生成预览（如图片缩略图）。

handleFileUpload(event) {
  const file = event.target.files[0];
  if (!file.type.match('image.*')) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    this.previewUrl = e.target.result;
  };
  reader.readAsDataURL(file);
}

进度条显示

利用 Axios 的 onUploadProgress 回调实现上传进度监控。

vue 实现上传文件

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    this.uploadProgress = percent;
  }
})

拖拽上传

通过 @dragover.prevent 和 @drop.prevent 实现拖拽区域，在 drop 事件中获取文件。

<div 
  @dragover.prevent
  @drop.prevent="handleDrop"
  class="drop-zone"
>
  拖拽文件到此处
</div>

<script>
methods: {
  handleDrop(event) {
    this.file = event.dataTransfer.files[0];
  }
}
</script>

文件验证

在上传前对文件大小和类型进行校验。

vue 实现上传文件

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

  if (!validTypes.includes(file.type)) {
    alert('仅支持JPEG/PNG格式');
    return false;
  }
  if (file.size > maxSize) {
    alert('文件大小超过限制');
    return false;
  }
  return true;
}

组件化封装

将上传逻辑封装为可复用的组件，通过 props 接收配置参数（如上传地址、文件类型限制等）。

props: {
  endpoint: {
    type: String,
    required: true
  },
  allowedTypes: {
    type: Array,
    default: () => ['image/*']
  }
}

服务器响应处理

根据服务器返回的状态码或消息显示成功/错误提示。

axios.post('/upload', formData)
  .then(response => {
    if (response.data.success) {
      this.$toast.success('上传成功');
    } else {
      this.$toast.error(response.data.message);
    }
  })

取消上传

通过 Axios 的 CancelToken 实现上传取消功能。

const source = axios.CancelToken.source();
axios.post('/upload', formData, {
  cancelToken: source.token
});

// 取消上传
cancelUpload() {
  source.cancel('用户取消上传');
}