vue 怎么实现上传

2026-03-08 12:14:55VUE

Vue 实现文件上传的方法

使用 Vue 实现文件上传可以通过原生 HTML 的 <input type="file"> 元素结合 Vue 的事件处理和 Ajax 请求完成，也可以借助第三方库如 axios 或 vue-upload-component 简化流程。

原生 HTML 文件上传

通过 <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('/api/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
};
</script>

使用 axios 上传文件

axios 是一个流行的 HTTP 客户端库，支持文件上传。

vue 怎么实现上传

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

<script>
import axios from 'axios';

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

使用 vue-upload-component

vue-upload-component 是一个专门为 Vue 设计的文件上传组件，支持拖拽上传、多文件上传等功能。

安装依赖：

vue 怎么实现上传

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/api/upload"
      @input-file="onInputFile"
    ></file-upload>
    <button @click="$refs.upload.active = true">选择文件</button>
    <button @click="$refs.upload.active = false">取消</button>
  </div>
</template>

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

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    onInputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        console.log('开始上传:', newFile);
      }
      if (newFile && oldFile) {
        console.log('上传进度:', newFile.progress);
      }
      if (!newFile && oldFile) {
        console.log('上传完成或取消');
      }
    }
  }
};
</script>

服务器端处理

文件上传后，服务器需要接收并处理文件数据。以 Node.js 的 Express 为例：

const express = require('express');
const multer = require('multer');
const app = express();

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log('文件已接收:', req.file);
  res.json({ message: '文件上传成功' });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});