Me gustaría usar Axios en mi sitio web Nuxt.js para cargar un archivo en un depósito S3. Ya logré la parte para obtener la URL prefirmada. Cuando trato de usar la URL prefirmada con Postman, todo funciona bien, pero cuando lo intento con Axios aparece este error: Error Uncaught (in promise) ReferenceError: Access is not defined .
Aquí está mi código:
<template> <v-file-input label="Select your file to upload" accept="image/*" v-model="myFile"> File to upload to S3 </v-file-input> </template> <script> export default { data() { return { myFile: null, ApiGatewayUrl: "https://xxxxxx.execute-api.eu-central-1.amazonaws.com/" } }, methods: { uploadFile() { // get the pre-signed URL this.$axios.get(this.ApiGatewayUrl, { headers: { Authorization: this.$auth.strategy.token.get() } }).then((response) => { // now do a PUT request to the pre-signed URL this.$axios.put(response.data, { files: this.myFile }, { headers: { [Content-Type]: 'multipart/form-data' } }).then((response) => { this.setState({ statusCode: response.status, }) }) }) } } } </script>Como funciona con Postman, supongo que el error proviene de mi configuración de Axios.
Estás especificando mal el encabezado del tipo de contenido.
Reemplazar:
headers: { [Content-Type]: 'multipart/form-data' }Con:
headers: { "Content-Type": "multipart/form-data" }