Nuxt将多个文件上载到S3

Question

我正试图找出如何将多个文件上传到我的S3存储桶中，但似乎无法解决。我正在运行一个带有express api的Nuxt.js应用程序。我只是测试了1到2个要上传的文件，但得到了500个错误回复：配置中缺少凭据，如果使用AWS_config_FILE，请将AWS_SDK_LOAD_config设置为1。

我的Vue模板：/pages/add.Vue

<template>
<v-col cols="12">
<h2 class="display-1 font-weight-light mb-5">Add Photos</h2>
<v-form
ref="uploadForm"
v-model="valid"
enctype="multipart/form-data"
lazy-validation
@submit.prevent="submitFiles"
>
<v-row>
<v-col cols="12" sm="6">
<v-file-input
v-model="photos"
:counter="30"
:rules="uploadRules"
accept="image/png, image/jpeg"
show-size
multiple
label="Click to upload photos"
/>
</v-col>
<v-col cols="12" sm="6">
<v-btn :loading="loading" color="primary" @click="submitFiles()">
Upload
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
</template>
<script>
export default {
layout: 'admin',
data: () => ({
photos: [],
uploadRules: [(v) => (v && v.length <= 30) || 'No more than 30 files'],
valid: true,
loading: false
}),
methods: {
submitFiles() {
if (this.$refs.uploadForm.validate()) {
this.loading = true
const formData = new FormData()
const Form = this
for (let i = 0; i < this.photos.length; i++) {
const file = this.photos[i]
formData.append(`photos['${i}']`, file)
}
this.$axios
.post('/photos/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((res) => {
console.log('success')
console.log(res)
})
.catch((error) => {
console.log('fail')
console.log(error)
})
.finally(() => {
Form.loading = false
Form.photos = []
})
}
}
}
}
</script>

我的上传文件：/utils/upload.js

const aws = require('aws-sdk')
const multer = require('multer')
const multerS3 = require('multer-s3')
const s3 = new aws.S3()
aws.config.update({
apiVersion: '2006-03-01',
accessKeyId: process.env.AWS_KEY,
secretAccessKey: process.env.AWS_SECRET,
region: process.env.AWS_REGION_APP
})
const upload = multer({
storage: multerS3({
s3,
bucket: process.env.BUCKET,
acl: 'public-read',
metadata: (req, file, cb) => {
cb(null, { fieldName: file.fieldname })
},
key: (req, file, cb) => {
cb(null, Date.now().toString())
}
})
})
module.exports = upload

My Express api:/api/photos.js

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.json())
const upload = require('../utils/upload')
// Upload photos
app.post('/upload', upload.array('photos', 3), (req, res) => {
res.send('Successfully uploaded ' + req.files.length + ' files!')
})
module.exports = app

Answer 1

我仍然不确定原因，但在我安装了aws-cli来测试我的凭据后，它就工作了。

我还更新了add.vue文件中的部分代码来自：

for (let i = 0; i < this.photos.length; i++) {
const file = this.photos[i]
formData.append(`photos['${i}']`, file)
}

至：

for (let i = 0; i < this.photos.length; i++) {
formData.append(`photos`, this.photos[i])
}