vue上传文档怎么实现

2026-01-22 11:11:59VUE

使用原生 `<input type="file">` 实现上传

在 Vue 模板中添加一个文件输入框，绑定 change 事件处理文件选择：

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

在方法中处理文件对象：

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

通过 FormData 发送文件到服务器

创建 FormData 对象并附加文件数据：

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

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('Upload success:', response.data);
});

使用第三方组件库实现

安装 element-ui 上传组件：

npm install element-ui

在组件中使用 Upload 组件：

<el-upload
  action="/upload"
  :on-success="handleSuccess"
  :before-upload="beforeUpload">
  <el-button type="primary">点击上传</el-button>
</el-upload>

配置上传参数和回调：

vue上传文档怎么实现

methods: {
  beforeUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.$message.error('文件大小不能超过2MB');
    }
    return isLt2M;
  },
  handleSuccess(res) {
    this.$message.success('上传成功');
  }
}

实现拖拽上传功能

添加拖拽区域和事件监听：

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

处理拖放事件：

methods: {
  onDrop(e) {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      this.uploadFile(files[0]);
    }
  },
  uploadFile(file) {
    // 上传逻辑
  }
}

添加样式增强用户体验：

.drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.drop-area:hover {
  border-color: #409eff;
}

显示上传进度

利用 axios 的 onUploadProgress 回调：

vue上传文档怎么实现

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

在界面中显示进度条：

<el-progress 
  :percentage="uploadPercent"
  v-if="isUploading" />

文件类型验证

在提交前检查文件类型：

const validTypes = ['application/pdf', 'image/jpeg'];
if (!validTypes.includes(file.type)) {
  alert('仅支持PDF和JPEG文件');
  return false;
}

多文件上传处理

修改 input 属性允许选择多个文件：

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

处理多个文件上传：

handleMultiUpload(event) {
  const files = Array.from(event.target.files);
  files.forEach(file => {
    const formData = new FormData();
    formData.append('files[]', file);
    // 上传逻辑
  });
}