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