vue实现多图片上传

2026-02-23 22:39:04VUE

Vue 实现多图片上传的方法

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

通过原生文件输入框实现多文件选择，结合 FormData 上传到服务器。

<template>
  <div>
    <input type="file" multiple @change="handleFileChange" accept="image/*">
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileChange(e) {
      this.files = Array.from(e.target.files);
    },
    async uploadFiles() {
      const formData = new FormData();
      this.files.forEach(file => {
        formData.append('images[]', 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-upload-component`

vue-upload-component 提供了更丰富的上传功能，如拖拽上传、进度显示等。

安装依赖：

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      multiple
      accept="image/*"
      @input-file="handleInputFile"
      @input-filter="handleInputFilter"
    ></file-upload>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: { FileUpload },
  methods: {
    handleInputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        // 新文件添加
      }
    },
    handleInputFilter(newFile, oldFile) {
      if (newFile && !oldFile) {
        // 文件类型过滤
        if (!/\.(jpe?g|png|gif)$/i.test(newFile.name)) {
          return false;
        }
      }
    }
  }
};
</script>

图片预览功能

在上传前显示图片预览，提升用户体验。

<template>
  <div>
    <input type="file" multiple @change="handleFileChange" accept="image/*">
    <div v-for="(file, index) in files" :key="index">
      <img :src="file.preview" width="100">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileChange(e) {
      this.files = Array.from(e.target.files).map(file => ({
        raw: file,
        preview: URL.createObjectURL(file)
      }));
    }
  }
};
</script>

分片上传大文件

对于大文件，可以使用分片上传减少服务器压力。

async uploadChunks(file) {
  const chunkSize = 2 * 1024 * 1024; // 2MB
  const chunks = Math.ceil(file.size / chunkSize);
  for (let i = 0; i < chunks; i++) {
    const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', chunks);
    await axios.post('/api/upload-chunk', formData);
  }
}

服务器端处理

以 Node.js 为例，使用 multer 处理上传的图片。

vue实现多图片上传

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

app.post('/api/upload', upload.array('images[]'), (req, res) => {
  console.log(req.files);
  res.json({ success: true });
});