如何在Nuxt.js中实现多文件上传至S3？现有代码遇阻

你当前的问题是虽然给input加了multiple属性，但代码里只处理了单个文件（取files[0]且只append一次），所以无法实现多文件上传。以下是完整的修改步骤：

1. 修改HTML模板 #

给input添加multiple属性，同时优化文件名显示逻辑，支持展示多个选中的文件名：

<div class="a-row a-spacing-top-medium">
  <label class="choosefile-button">
    <i class="fal fa-plus"></i>
    <input
        type="file"
        @change="onFileSelected"
        ref="files"
        multiple  <!-- 添加multiple属性 -->
        accept="image/*"  <!-- 可选：限制仅上传图片文件 -->
    />
    <p style="margin-top: -70px">
      <!-- 显示所有选中的文件名，用逗号分隔 -->
      {{ fileNames.length > 0 ? fileNames.join(', ') : '未选择文件' }}
    </p>
  </label>
</div>

2. 调整Vue脚本代码 #

修改数据结构和方法，支持多文件的选择与上传：

<script>
import axios from 'axios'
export default {
  data() {
    return {
      selectedFiles: [],  // 改为数组存储多个文件
      fileNames: []       // 存储所有选中文件的文件名
    }
  },
  methods: {
    onFileSelected(event) {
      // 将FileList转为数组，存储所有选中的文件
      this.selectedFiles = Array.from(event.target.files)
      // 提取所有文件名到数组
      this.fileNames = this.selectedFiles.map(file => file.name)
      console.log('选中的文件列表:', this.selectedFiles)
    },
    async onAddProduct() {
      if (this.selectedFiles.length === 0) {
        console.log('请先选择文件')
        return
      }
      
      let data = new FormData()
      // 循环将每个文件添加到FormData中
      this.selectedFiles.forEach(file => {
        // 如果后端需要接收数组形式，键名用`photos[]`；若支持多同名键，直接用`photos`
        data.append('photos[]', file, file.name)
      })

      try {
        const response = await axios.post('http://localhost:5000/api/products', data, {
          headers: {
            'Content-Type': 'multipart/form-data'  // 显式指定请求头，可选但推荐
          }
        })
        console.log('上传成功:', response)
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

3. 后端（Node.js）批量上传至S3的关键逻辑 #

假设你的后端用Node.js + AWS SDK，接收前端传来的文件列表后，循环调用S3的上传接口：

const AWS = require('aws-sdk')
const s3 = new AWS.S3({ /* 你的S3配置：accessKeyId、secretAccessKey、region等 */ })
const multer = require('multer')
const upload = multer()

// 处理上传请求的路由示例
app.post('/api/products', upload.array('photos[]', 10), async (req, res) => {
  try {
    const files = req.files
    
    // 批量上传到S3
    const uploadPromises = files.map(file => {
      const params = {
        Bucket: '你的S3桶名',
        Key: `products/${Date.now()}-${file.originalname}`,  // 生成唯一文件名避免覆盖
        Body: file.buffer,
        ContentType: file.mimetype
      }
      return s3.upload(params).promise()
    })

    // 等待所有文件上传完成
    const results = await Promise.all(uploadPromises)
    res.status(200).json({ message: '所有文件上传成功', data: results })
  } catch (error) {
    res.status(500).json({ message: '上传失败', error: error.message })
  }
})

注意事项 #

• 确保后端使用的文件处理中间件（如multer）配置正确，upload.array('photos[]', 10)表示最多接收10个名为photos[]的文件。
• S3的权限配置要正确，确保后端拥有上传文件到指定桶的s3:PutObject权限。
• 可根据需求添加文件大小、类型的校验逻辑，避免非法文件上传。

内容的提问来源于stack exchange，提问作者jibzy