aws sdk – Nuxt3 multer-S3 send formData
I’ve been stuck for days now.
In Nuxt3, I am going to upload an image to aws bucket using multer S3 as formdata.
However, there is no operation in the code below.
Can you tell me what I missed?
The useFetch is unfamiliar.
In the example for axios, there was no problem transferring to
const url = await this.$axios.post('/api/upload', form)
but Nuxt3 fetch is difficult.
Thank you in advance for your help.
client.vue
const handleFileChange = async () => {
let formdata = new FormData()
const getImg = image.value.files[0]
formdata.append('image', image.value.files[0])
try {
const res = await useFetch('/api/imgUploader', {
method: 'POST',
body: formdata
})
fileName.value = getImg.name
const result = res.data._rawValue
console.log(result)
} catch (e) {
console.log(e)
}
}
imgUploader.ts
import { uploadToStorage } from "../api/upload"
export default defineEventHandler(async (event) => {
if(event.node.req.method == 'POST'){
console.warn('req uploader apis')
try {
console.warn('upload')
uploadToStorage.single('image'), (res: any, req:any) => {
try {
res.status(200).json({ result: 'ok' })
} catch (error) {
console.warn(error)
}
}
} catch (e) {
console.warn(e)
}
}
})
upload.ts
import multer from 'multer'
import multerS3 from 'multer-s3'
import shortId from 'shortid'
import { S3Client } from '@aws-sdk/client-s3'
const uploadToStorage = multer({
storage: multerS3({
s3: new S3Client({
credentials: {
accessKeyId: 'my-accessKeyId',
secretAccessKey: 'my-secretAccessKey',
},
endpoint: {
hostname: 'my-hostname',
protocol: 'http',
path: "https://stackoverflow.com/",
},
region: 'my-region',
}),
bucket: 'my-bucket',
acl: 'public-read',
contentType: multerS3.AUTO_CONTENT_TYPE,
cacheControl: 'max-age=31536000',
key: function (req, file, cb) {
const fileId = shortId.generate();
const type = file.mimetype.split("https://stackoverflow.com/")[1];
const fileName = `${fileId}.${type}`;
cb(null, fileName);
},
})
})
export { uploadToStorage }
Read more here: Source link