Vue实现图片批量上传

2026-02-21 21:08:13VUE

实现图片批量上传的步骤

在Vue中实现图片批量上传可以通过以下方法完成，主要依赖HTML的<input type="file">元素和FormData对象。

创建文件上传输入框

在模板中添加一个文件输入框，设置multiple属性以支持多文件选择：

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

处理文件选择事件

在Vue的methods中定义handleFileChange方法，获取用户选择的文件列表：

handleFileChange(event) {
  const files = event.target.files;
  if (files.length > 0) {
    this.uploadFiles(files);
  }
}

构建FormData并上传

创建uploadFiles方法，使用FormData打包文件并发送到服务器：

async uploadFiles(files) {
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('images[]', files[i]);
  }

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

显示上传进度

如果需要显示上传进度，可以添加进度事件处理：

const config = {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(percentCompleted);
    // 更新进度条状态
  }
};
await axios.post('/api/upload', formData, config);

前端预览功能

在上传前可以添加图片预览功能：

previewImages(files) {
  const previews = [];
  for (let i = 0; i < files.length; i++) {
    const reader = new FileReader();
    reader.onload = e => {
      previews.push(e.target.result);
    };
    reader.readAsDataURL(files[i]);
  }
  return previews;
}

服务器端处理

Node.js Express服务器的简单处理示例：

Vue实现图片批量上传

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

app.post('/api/upload', upload.array('images[]'), (req, res) => {
  // req.files包含上传的文件信息
  res.json({ success: true, files: req.files });
});