vue文件上传怎么实现

2026-01-20 20:10:53VUE

前端实现文件上传

使用 Vue 结合 <input type="file"> 元素实现文件选择功能。通过 @change 事件监听文件选择变化，获取选中的文件对象。

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

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) {
        alert('请先选择文件');
        return;
      }
      // 上传逻辑
    }
  }
};
</script>

构建 FormData 对象

将选中的文件添加到 FormData 对象中，便于通过 HTTP 请求发送到服务器。FormData 可以处理二进制文件数据，适合文件上传场景。

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

发送 HTTP 请求

使用 axios 或其他 HTTP 客户端库发送 POST 请求，将 FormData 作为请求体发送到服务器接口。设置 Content-Type 为 multipart/form-data。

vue文件上传怎么实现

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

显示上传进度

通过 axios 的 onUploadProgress 回调函数获取上传进度，并在前端展示进度条或百分比。

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

后端接口处理

后端需要提供接收文件的接口。以 Node.js Express 为例，使用 multer 中间件处理文件上传。

vue文件上传怎么实现

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('文件上传成功');
});

文件类型和大小限制

在前端对文件类型和大小进行验证，提供更好的用户体验。可以通过检查文件的 type 和 size 属性实现。

if (this.selectedFile.size > 10 * 1024 * 1024) {
  alert('文件大小不能超过10MB');
  return;
}

const allowedTypes = ['image/jpeg', 'image/png'];
if (!allowedTypes.includes(this.selectedFile.type)) {
  alert('仅支持JPEG和PNG格式的图片');
  return;
}

多文件上传实现

通过添加 multiple 属性到文件输入元素，支持一次选择多个文件上传。修改事件处理逻辑以适应多文件场景。

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

handleFileChange(event) {
  this.selectedFiles = Array.from(event.target.files);
},
uploadFiles() {
  const formData = new FormData();
  this.selectedFiles.forEach(file => {
    formData.append('files', file);
  });
  // 发送请求
}