vue如何实现文件上传

2026-01-22 08:49:23VUE

使用 `<input type="file">` 结合 FormData

在 Vue 中可以通过原生 HTML 的 <input type="file"> 元素实现文件上传，结合 FormData 对象将文件数据发送到后端。

创建一个文件输入组件，监听 change 事件获取文件对象：

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

在方法中通过 FormData 包装文件并发送请求：

vue如何实现文件上传

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

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

使用第三方库（如 `vue-upload-component`）

对于更复杂的需求（如多文件上传、拖拽上传），可以使用第三方库简化流程。

安装 vue-upload-component：

vue如何实现文件上传

npm install vue-upload-component

在组件中引入并使用：

<template>
  <file-upload
    :multiple="true"
    @input="handleUpload"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: { FileUpload },
  methods: {
    handleUpload(files) {
      files.forEach(file => {
        const formData = new FormData();
        formData.append('file', file.file);
        axios.post('/upload', formData);
      });
    }
  }
};
</script>

文件上传进度显示

通过 axios 的 onUploadProgress 回调可以实时显示上传进度：

axios.post('/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 等中间件处理文件：

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

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ path: req.file.path });
});