vue实现附件上传

实现附件上传功能

在Vue中实现附件上传功能可以通过以下步骤完成：

安装依赖 如果需要使用第三方库如axios进行文件上传，可以通过npm安装：

npm install axios

创建文件上传组件 在Vue组件中，创建一个文件输入元素：

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

处理文件选择 在methods中定义handleFileUpload方法，获取用户选择的文件：

methods: {
  handleFileUpload(event) {
    this.file = event.target.files[0];
  }
}

实现文件上传 使用axios将文件发送到服务器：

methods: {
  uploadFile() {
    if (!this.file) {
      alert('请选择文件');
      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);
    });
  }
}

添加进度显示

如果需要显示上传进度，可以添加进度条：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传</button>
    <progress :value="uploadProgress" max="100"></progress>
  </div>
</template>

在axios配置中添加进度回调：

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    this.uploadProgress = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
  }
})

支持多文件上传

修改文件输入元素以支持多选：

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

调整handleFileUpload方法处理多个文件：

handleFileUpload(event) {
  this.files = Array.from(event.target.files);
}

上传时遍历所有文件：

uploadFile() {
  if (!this.files.length) {
    alert('请选择文件');
    return;
  }

  const formData = new FormData();
  this.files.forEach(file => {
    formData.append('files[]', file);
  });

  // 其余上传逻辑相同
}

文件类型和大小限制

在文件选择时添加验证：

handleFileUpload(event) {
  const files = Array.from(event.target.files);
  const validFiles = files.filter(file => {
    const isValidType = ['image/jpeg', 'image/png'].includes(file.type);
    const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB

    if (!isValidType) alert('仅支持JPEG和PNG格式');
    if (!isValidSize) alert('文件大小不能超过2MB');

    return isValidType && isValidSize;
  });

  this.files = validFiles;
}

服务器端处理示例

Node.js Express服务器接收文件的示例：

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.json({ message: '文件上传成功' });
});

对于多文件上传：

app.post('/api/upload', upload.array('files[]'), (req, res) => {
  console.log(req.files);
  res.json({ message: '多个文件上传成功' });
});