vue实现文档上传

2026-02-09 10:40:26VUE

Vue 实现文档上传的方法

在 Vue 中实现文档上传通常需要结合 HTML 的 <input type="file"> 元素和后端接口。以下是几种常见的实现方式：

使用原生 HTML 文件上传

创建一个文件输入框，通过 @change 事件监听文件选择，并使用 FormData 对象将文件发送到服务器。

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

<script>
export default {
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async submitFile() {
      const formData = new FormData();
      formData.append('file', this.file);

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

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

如果需要更复杂的上传功能（如拖拽上传、多文件上传等），可以使用 vue-dropzone 等第三方库。

安装依赖：

npm install vue2-dropzone

使用示例：

<template>
  <div>
    <vue-dropzone
      ref="myVueDropzone"
      id="dropzone"
      :options="dropzoneOptions"
      @vdropzone-success="uploadSuccess"
    ></vue-dropzone>
  </div>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: '/api/upload',
        thumbnailWidth: 150,
        maxFilesize: 10, // MB
        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
      }
    };
  },
  methods: {
    uploadSuccess(file, response) {
      console.log('文件上传成功', response);
    }
  }
};
</script>

文件上传前的校验

在上传前可以对文件类型、大小等进行校验。

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0];
    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
    const maxSize = 5 * 1024 * 1024; // 5MB

    if (!allowedTypes.includes(file.type)) {
      alert('仅支持 PDF、JPEG、PNG 格式的文件');
      return;
    }

    if (file.size > maxSize) {
      alert('文件大小不能超过 5MB');
      return;
    }

    this.file = file;
  }
}

显示上传进度

通过 axios 的 onUploadProgress 可以显示上传进度。

async submitFile() {
  const formData = new FormData();
  formData.append('file', this.file);

  try {
    const response = await 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}%`);
      }
    });
    console.log('上传成功', response.data);
  } catch (error) {
    console.error('上传失败', error);
  }
}

后端接口示例（Node.js）

以下是一个简单的 Node.js 后端接口示例，使用 multer 处理文件上传。

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

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('未上传文件');
  }
  res.send({ filename: req.file.filename });
});

app.listen(3000, () => console.log('服务器已启动'));