Greetings! I have a backend that receives a request with an image for storage. When testing it with Postman and the code snippet below, everything works perfectly:
var axios = require('axios')
var FormData = require('form-data')
var fs = require('fs')
var data = new FormData()
data.append('file', fs.createReadStream('index.png'))
console.log('HEADERS')
console.log(data.getHeaders())
let config = {
method: 'post',
url: 'http://localhost:5013/v1/business/honda/widget/test/',
headers: {
...data.getHeaders(),
},
data: data,
}
However, the issue arises in my Vue app when attempting to replicate the process with the following code. I have two buttons - one to load the image and the other to send it. Upon sending the image to the backend, I encounter the error message 'http: no such file'.
To rectify this issue, refer to the modified code snippet below:
let imageData
// Function to send the image to the backend
function funtest() {
console.log('image')
const formData = new FormData()
const url = 'http://localhost:5013/v1/business/honda/widget/test/'
formData.append('file', imageData)
let config = {
method: 'post',
url: url,
headers: {
'Content-type': 'multipart/form-data',
},
data: formData,
}
axios(config)
.then((response) => {
console.log('RESPONSE')
console.log(response)
})
.catch((error) => {
console.log('ERROR')
console.log(error)
})
}
// Function to read the image
function onImage(data) {
const reader = new FileReader()
reader.onload = (e) => {
imageData = e.target.result
console.log('image')
}
reader.readAsDataURL(data.target.files[0])
}